animation-delay Archives

The CSS animation-delay property defines a delay for the start of an animation.

Syntax:

animation-delay: time;

time – specifies the number of seconds (s) or milliseconds (ms) to wait before the animation will start. The default value is 0.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  position: relative;
  animation: move 4s;
  animation-delay: 2s;
}

@keyframes move {
  from {left: 0px;}
  to {left: 250px;}
}
</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:

Click on the square to repeat the animation.

Enjoy coding!