CSS animation-duration Property
This property is used to define the time it takes one iteration of an animation to play.
In other words,
The total duration of the animation. Can be specified in seconds (s) or milliseconds (ms).
where time is a valid time value like 5s or 3500ms. The initial value of time is 0, meaning no animation plays.
Syntax -
|
animation-duration: time|initial|inherit;
|
Here we will see the meaning of the last two values -
1. initial
It changes all the properties applied to the element or the parent value to their initial value.
2. inherit
It changes all the properties applied to the element or the parent to the parent’s value.
Now we will see Example -
Example -
|
<!DOCTYPE html>
<html>
<style type="text/css">
@-webkit-keyframes move {
from {
left: 0;
top: 0;
}
50% {
left: 300px;
top: 0;
}
to {
left: 300px;
top: 300px;
}
}
@-webkit-keyframes resize {
from {
width: 100px;
height: 300px;
}
50% {
width: 100px;
height: 100px;
}
to {
width: 300px;
height: 100px;
}
}
#anim1 {
-webkit-animation-name: move, resize;
-webkit-animation-duration: 4s, 10s;
position: absolute;
background-color: purple;
}
</style>
<body>
<div id="anim1">Watch me move and change size!</div>
</body>
</html>
|
Output - Sample output would be -
