Issue with CSS animations on page load

Tagged: 

Author Posts

miltersen April 26, 2023 at 10:04 am

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 April 26, 2023 at 10:09 am

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 April 26, 2023 at 10:31 am

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 April 26, 2023 at 11:33 am

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

Cheers,
Sebastian

Sebastian April 26, 2023 at 12:41 pm

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 April 26, 2023 at 12:48 pm

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 April 27, 2023 at 10:18 am

Thanks Sebastian. It’s working now.

Sebastian April 27, 2023 at 11:00 am

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

You must login or register to reply to this topic.