How to hide an HTML element after certain seconds using CSS?

Originally posted here!

To hide an HTML element after certain seconds using CSS, you can use the @keyframes CSS rule and set the CSS property called visibility to value hidden for that particular element in CSS.

TL;DR

HTML

<div id="hideMeAfter5Seconds">Hello World!</div>

CSS

#hideMeAfter5Seconds {
  animation: hideAnimation 0s ease-in 5s;
  animation-fill-mode: forwards;
}

@keyframes hideAnimation {
  to {
    visibility: hidden;
    width: 0;
    height: 0;
  }
}

For example, let's say we have a div with some content Hello world! inside it which we need to hide after 5 seconds.

So for that let's first create the div and also set an id attribute to it so we can reference it later in the CSS. It can be done like this,

<div id="hideMeAfter5Seconds">Hello World!</div>

Now in the CSS, we can refernce the hideMeAfter5Seconds div id like this,

#hideMeAfter5Seconds {
  // css magic here!
}

After that, let's use the animation css property and define 4 properties like this,

#hideMeAfter5Seconds {
  animation: hideAnimation 0s ease-in 5s;
}

As you can see from the above css declaration, we have set some properties like hideAnimation, 0s, ease-in, and 5s.

• The first one, hideAnimation is the name of the animation which we need to declare using the @keyframes rule. This is where we will define the auto-hiding logic for the div HTML element.

• The second one is the animation duration which we have set to 0s because we don't need the animation to run for any amount of seconds. We just need to execute some properties immediately in the hideAnimation animation.

• The third one is the animation timing function, which defines the speed curve of the animation. In our case, we have set it to be ease-in.

• The fourth one is the delay of the animation which we have set to 5s so that animation waits for 5s then executes it.

After that we can use the CSS animation-fill-mode property and set its value to forwards like this,

#hideMeAfter5Seconds {
  animation: hideAnimation 0s ease-in 5s;
  animation-fill-mode: forwards;
}

Now we have declared the animation property, now we need to set the behavior of the hideAnimation animation itself using the @keyframes css rule.

It can be done like this,

#hideMeAfter5Seconds {
  animation: hideAnimation 0s ease-in 5s;
  animation-fill-mode: forwards;
}

@keyframes hideAnimation {
  // animation behavior
}

Inside the hideAnimation, we can use the the to value or block and set the css visibiltiy property to hidden like this,

#hideMeAfter5Seconds {
  animation: hideAnimation 0s ease-in 5s;
  animation-fill-mode: forwards;
}

@keyframes hideAnimation {
  to {
    visibility: hidden;
  }
}

So at the end when the browser loads the above process works like this,

• CSS gets loaded to the browser
• The Browser sees the animation property and waits for 5s to execute the hideAnimation animation.
• Since we have set the running time or the duration of the animation to 0s, the to block is immediately executed after waiting for 5 seconds, and the visibility:hidden CSS property gets applied to the div element which hides the div.

The visibility:hidden only sets the visible state of the div element and doesn't remove the entire div from the visual flow. To remove it we can also set its CSS width and the height property to 0 like this,

#hideMeAfter5Seconds {
  animation: hideAnimation 0s ease-in 5s;
  animation-fill-mode: forwards;
}

@keyframes hideAnimation {
  to {
    visibility: hidden;
    width: 0;
    height: 0;
  }
}

That's it we have successfully hidden the element after 5 seconds. 🎉 Yay 😃!

See the above code live in JSBin

One question may arise on why couldn't we use the display CSS property and set its value to none. This is because we cannot animate the display property and thus it will not work inside the to block.

Feel free to share if you found this useful 😃.