Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS FadeIn animation + :hover transform bug? Reply To: FadeIn animation + :hover transform bug?

#241227
Beverleyh
Participant

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