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

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:

  1. 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
  2. Use setTimeout to create the 3 second timer at the beginning when the page loads
  3. 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;
    }
<div class="thing"></div>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.316635 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO