The CSS animation-duration property specifies how long an animation should take to complete one cycle.
Syntax:
animation-duration: time;time – defines the length of time an animation should take to complete one cycle. This can be defined in seconds (s) or milliseconds (ms). The default value is 0 (that means that no animation will occur).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.square-1, .square-2 {
width: 100px;
height: 100px;
margin: 5px;
background: #2a9d8f;
position: relative;
display: flex;
align-items: center;
justify-content: center;
animation: move infinite;
}
.square-1 {
animation-duration: 4s;
}
.square-2 {
animation-duration: 2s;
}
@keyframes move {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<div class="square-1">1</div>
<div class="square-2">2</div>
</body>
</html>Output:
Define that the square-1 animation should complete one cycle in 4 seconds and the square-2 should complete one cycle in 2 seconds:
1
2
Enjoy coding!
Read also:
CSS Transition VS. CSS Animation