Web development

CSS animation-delay Property

CSS animation-delay Property

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


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.


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

@keyframes move {
  from {left: 0px;}
  to {left: 250px;}

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



Click on the square to repeat the animation.

Enjoy coding!

Read also:

Introduction to CSS Animation

CSS Transition VS. CSS Animation

CSS Transition