Jump to content
Please Use CODE Tags

CSS animation wait until page load?

stefanmz
By stefanmz
in Programming
 Share
Go to solution Solved by stefanmz,
32 minutes ago, RockSolid1106 said:

AFAIK, it's not possible with only CSS. You'll have to use JS.

You'll have to create a class for the animation, and then use window.onload and add the class to the element.

 

This might help you with making a CSS class for animations.

Ok thanks! I actually decided to remove the image I have and put the same image but with Divi builder(the website builder I use) instead of from the theme settings because this gives me a lot more control over the animation. 

Posted

Hey,is there a way to make the animation(fade-in) wait for the page to load and then start? The animation is for an image. So can I do this only with CSS? No js. Because I am using wordpress and js would be a hassle there.

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

AFAIK, it's not possible with only CSS. You'll have to use JS.

You'll have to create a class for the animation, and then use window.onload and add the class to the element.

 

This might help you with making a CSS class for animations.

On 4/5/2024 at 10:13 PM, LAwLz said:

I am getting pretty fucking sick and tired of the "watch something else" responses. It's such a cop out answer because you could say that about basically anything, and it doesn't address the actual complaints. People use it as some kind of card they pull when they can't actually respond to the criticism raised but they still feel like they need to defend some company/person. If you don't like this thread then stop reading it. See how stupid it is? It's basically like telling someone "shut the fuck up". It's not a clever responsive, it doesn't address anything said, and it is rude. 

 ^

 

bruh switch to dark mode its at the bottom of this page

VPN Server Guide

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
  • Solution
32 minutes ago, RockSolid1106 said:

AFAIK, it's not possible with only CSS. You'll have to use JS.

You'll have to create a class for the animation, and then use window.onload and add the class to the element.

 

This might help you with making a CSS class for animations.

Ok thanks! I actually decided to remove the image I have and put the same image but with Divi builder(the website builder I use) instead of from the theme settings because this gives me a lot more control over the animation. 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Just the obligatory reminder to ensure that your stylesheet is configured not to show animations - except absolutely essential ones - to users who prefer reduced motion, an important accessibility function which is often overlooked. (See https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)

 

____________________________________________________________________________________________________________________________________

 

 

____________________________________________________________________________________________________________________________________

pythonmegapixel

into tech, public transport and architecture // amateur programmer // youtuber // beginner photographer

Thanks for reading all this by the way!

By the way, my desktop is a docked laptop. Get over it, No seriously, I have an exterrnal monitor, keyboard, mouse, headset, ethernet and cooling fans all connected. Using it feels no different to a desktop, it works for several hours if the power goes out, and disconnecting just a few cables gives me something I can take on the go. There's enough power for all games I play and it even copes with basic (and some not-so-basic) video editing. Give it a go - you might just love it.

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×