How to show div after 5 seconds css

show div after 5 seconds

Recently I wanted to write some code to show div after 5 seconds CSS (Cascading Style Sheets). When you see, anybody thinks this is possible via JavaScript and/or jQuery but how to achieve via CSS. This is really easy with CSS Animations. You just need to write keyframe animation and div block to call the animation and the visibility.

Here you’re to the code:

First write keyframe animation. This is the code you’re using to create the animation.

@keyframes showBlock {
	to { visibility: visible; }
}

Then you need to use this animation to achieve the visibility. Let’s see how we can use keyframes animation.

.visibilityDiv {
	animation: showBlock 0s 5s forwards;
	visibility: hidden;
}

visibility property handling the show and hide div element or block. animation property uses to keep the visibility as defined. Here showBlock call to the @keyframes animation. 0s means the starting point of the animation. 5s refers to the how long animation should keeps to run the code. This means it’s counting 0s - 5s and run the visibility property.

Your final code should like:

.visibilityDiv {
	animation: showBlock 0s 5s forwards;
	visibility: hidden;
}

@keyframes showBlock {
	to { visibility: visible; }
}

You just need to change div class and/or ID names accordingly.

That is all from the tutorial regarding show div after 5 seconds css. Hope you enjoyed this tutorial. Happy learning ahead. Thanks for reading.

Recommended: Please follow our step by step guide how to create a WordPress Theme from scratch. You’ll be able to create your own theme at the end of these lessons.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *