FadeIn animation + :hover transform bug?

[valiosg]

Hello everyone!

I am having a bit of trouble with a couple of animations on my website. The things I am using are fairly simple: I use wow.js (http://mynameismatthieu.com/WOW) for my fadeIn animations (whenever the element is within the visible portion of the screen – the slide-in-upwards animation is triggered). Also (on the same element) I have a :hover effect which is a transform: scale(1.1). On Chrome everything seems to be working quite well. The problem is on IE (tested on 11) and Safari (tested on Version 9.0.3 11601.4.4). The initial fade in animation works well, but the “scale()” effect is nowhere to be found. I noticed, though, that while the fadeIn animation is in effect, if I :hover on an element (mid-transition), the scale is triggered (and lost immediately as soon as the fadeIn animation ends).

I would love to post a CodePen with the example, but I am using the paid library for the animations (wow.js), so I do not know if that is appropriate.

Any help would be much appreciated!

[Beverleyh]

Without seeing a demo, its very hard to troubleshoot, so I’m guessing wildly that is has something to do with multiple CSS animations/transforms cancelling each other out when they’re applied to the same element.

You can sometimes get around this if you put the element inside a wrapper (div or span) and apply one transform/animation to each;

<span class="fadein">
    <span class="scale-on-hover"></span>
</span>

BTW, it looks like WOW uses Animate.css for animations (I’m guessing that the WOW part is just the JavaScript that detects scroll position and triggers each animation), so try creating a CodePen using only the CSS. Just extract the portion that relates to the animations you’re using so as not to overwhelm anyone offering help, because Animate.css is a big library https://github.com/daneden/animate.css

[valiosg]

I apologize for the lack of information/visualization about the issue. Thank you for your answer. This was indeed the issue: the overlapping animations seem to cancel each other out. When I wrap the content of the fading-in div and put the :hover animation on it, everything works as intended!

[Author]

Posts