In this section, we will learn what the animation-delay property is and how to use it in CSS.
Click here to run the example of animation-delay property.
CSS animation-delay Property Definition and Usage
For any particular reason sometimes we want to delay the start of an animation.
For this reason, CSS provided a property named animation-delay by which we can put a delay on those types of animations that are created using “@keyframes rule“.
CSS animation-delay Property Syntax
animation-delay: time|initial|inherit;CSS animation-delay Property Value
The value we set for this property is a number declares the amount of delay based on seconds or milliseconds:
-
ms: stands for millisecond and using this unit
we can set a value for this property based on millisecond. -
s: stands for second and using this unit we can
set a value for this property based on second.
Note: the two global values “initial” and “inherit” could also be used for this property.
Example: animation-delay property in CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{
margin:unset;
box-sizing: border-box;
}
button{
width:10em;
height:10em;
display: block;
margin-top:1em;
margin-bottom: 1em;
margin-left: auto;
margin-right:auto;
border-radius: 0.5em;
border: thin solid lightgray;
animation-name: rotate_animation1;
animation-duration:300ms;
animation-delay: 3s;
}
@keyframes rotate_animation1{
from{
transform: rotateZ(0deg);
}to{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<button>Rotate after 3 seconds</button>
</body>
</html>Example: CSS animation-delay millisecond
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{
margin:unset;
box-sizing: border-box;
}
button{
width:10em;
height:10em;
display: block;
margin-top:1em;
margin-bottom: 1em;
margin-left: auto;
margin-right:auto;
border-radius: 0.5em;
border: thin solid lightgray;
animation-name: rotate_animation1;
animation-duration:300ms;
animation-delay: 500ms;
}
@keyframes rotate_animation1{
from{
transform: rotateZ(0deg);
}to{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<button>This is button</button>
</body>
</html>