Aos: other CSS transitions not working

[mark-chief]

I have some existing css transitions on elements throughout my site.

When using AOS, they do not work.

My existing CSS looks like this where the box shadow is transitioned on hover. transition: all ease-in-out .2s;

a.box-cta {
    display: block;
    transition: all ease-in-out .2s;
    -webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,0.15);
    -moz-box-shadow: 0 0 3px 0 rgba(0,0,0,0.15);
        box-shadow: 0 0 3px 0 rgba(0,0,0,0.15);
}


    a.box-cta:hover {
        -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,0.3);
        -moz-box-shadow: 0 0 6px 0 rgba(0,0,0,0.3);
        box-shadow: 0 0 6px 0 rgba(0,0,0,0.3);
    }

HTML:

<a href="" class="box-cta" data-aos="fade-left">
    <span>
        <h3>Example</h3>
    </span>
</a>

Using version 2.1

[michalsnik]

You should probably wrap your element with an extra box and use AOS on the wrapper to not mess with your styles.