In this section, we will learn what the animation-duration property is and how to use it in CSS.
Click here to run the example of animation-duration property.
CSS animation-duration Property Definition and Usage
When we apply an animation to an element, the most important step that should be taken care of is to set the time length of that animation. Without it, there will be no animation at all.
Note: we are talking about those animations that are created by @keyframes at rule.
We set this time length for the animation using the CSS animation-duration property.
CSS animation-duration Property Syntax
animation-duration: time|initial|inherit;CSS animation-duration Property Value
The value we set for this property is a number that declares the duration of the target animation 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-duration 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:2s;
}
@keyframes rotate_animation1{
from{
transform: rotateZ(0deg);
}to{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<button>This is button</button>
</body>
</html>Example: CSS animation-duration property millisecond value
<!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;
}
@keyframes rotate_animation1{
from{
transform: rotateZ(0deg);
}to{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<button>This is button</button>
</body>
</html>