CODEWITHSUNDEEP
jquerycss
Staveven
Staveven

Reputation: 120

How to have a CSS animation wait to load after JQuery or Page Loads

I built an SVG animation that runs using CSS Keyframes. It works great on Desktop, but when it's on a slower mobile device, the animation is almost over when the page loads.

The problem is that I am using CSS (animation-delay: 3s), but the page is taking about 4 seconds to load so that by the time it loads, my animation is already starting. I need the page to fully load and my Jquery to be loaded before the CSS animation starts!

BASICALLY, how do you get a page to FULLY load before the CSS animation-delay property runs, or how to get it to run AFTER your Jquery Document ready is loaded.

Upvotes: 0

Views: 349

Answers (1)

Pj Mischuk
Pj Mischuk

Reputation: 31

I have a few ideas on how to do this.

You could set the animation to load after 5 seconds.

Or, create a light-weight mobile version. Or take out what impacts loading the page loading time. Use min versions.

Edit: try (animation-delay: 5) depending on mobile pixels.

@media (min-width: 576px) {

}

Upvotes: 1

Related Questions