Home How would I create a div that starts disappearing after 3 seconds?

# How would I create a div that starts disappearing after 3 seconds?

Ant Arni
1#
Ant Arni Published in 2017-12-07 22:25:30Z
 I want to have an div visible at the top of my page by default, however when you load the page a 3 second timer starts after which that div begins to fade out until it disappears. I have a few ideas about how to do this, but I'm not entirely sure: set transition of div in css to however long I want it to spend fading out, and set background color/color to rgba values with 0 opacity Use setTimeout to create the 3 second timer at the beginning when the page loads I'm stuck...
Andy Hoffman
2#
Andy Hoffman Reply to 2017-12-07 22:30:46Z
 This is probably the easiest way to do it. Setting forwards on the animation is important, so the opacity doesn't reset after animation completes.  @keyframes fadeout { to { opacity: 0; } } .thing { width: 100px; height: 100px; background-color: red; animation: .5s fadeout forwards 3s; } 

 You need to login account before you can post.
Processed in 0.316635 second(s) , Gzip On .