Issue with CSS animations on page load

Tagged: 

Author Posts

miltersen

When adding an animation on page load with MT, I’ve noticed that, unlike with animations from e.g. Beaver Builder, the element is already shown before the animation runs. I would like an element to appear with the animation, e.g. fade-in. Is there a way to achieve this with MT?


Sebastian

Hey,

Yes this is possible. It involves hiding the element first, by setting opacity to 0 and animation-fill-mode. See this answer for more details: https://themeover.com/forum/topic/hide-element-before-animation/

(it should work with the fadeIn animation, which controls the fade using opacity)

I hope that helps. Please let me know if you need further assistance.

Thanks!
Sebastian


miltersen

Hi Sebastian

Thanks. I still can’t make it play though. Tried it on a few sites with fadein and bouncein, with opacity 0 and Fill Mode: forwards. Can I invite you to my staging site to have a look?

Cheers!
Sune


Sebastian

OK, no problem. Please send the invite to support @ themeover [dot] com

Cheers,
Sebastian


Sebastian

Thanks Sune,

This issue was due to having !important enabled globally. I’ve switched that off, and now the animation works as intended.

If you want to keep !important on for all styles on the main site, I can experiment with a fix where !important is added to the keyframe rules too.

Cheers,
Sebastian


Sebastian

I just tried that experiment and sadly !important doesn’t work with keyframes. So the only option is to remove it from the CSS.


miltersen

Thanks Sebastian. It’s working now.


Sebastian

You’re welcome, sorry I couldn’t find a way to make keyframes !important.

You must login or register to reply to this topic.