How to hide an HTML element after certain seconds using CSS?
Tags: css
Published: 2021-06-20 00:00:00

---
  title: How to hide an HTML element after certain seconds using CSS?
  published: true
  tags: CSS
  date: Sun Jun 20 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/hide-html-elements-after-certain-seconds-css
  cover_image: https://melvingeorge.me/_next/static/images/main-22474cfa8360bed1cf6b76958ade97b3.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/hide-html-elements-after-certain-seconds-css)
  
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**

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

**CSS**

```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,

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

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

```css
#hideMeAfter5Seconds {
  // css magic here!
}
```

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

```css
#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](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) 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,

```css
#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,

```css
#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,

```css
#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,

```css
#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](https://jsbin.com/wedezokibu/3/edit?html,css,output)

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 😃.

---