Categories
CSS Web development

CSS animation-duration Property

CSS animation-duration Property

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). 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!