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 thediv
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 thehideAnimation
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 for5s
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 thehideAnimation
animation. - Since we have set the running time or the duration of the animation to
0s
, theto
block is immediately executed after waiting for 5 seconds, and thevisibility:hidden
CSS property gets applied to thediv
element which hides thediv
.
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.