how to add delay between animation iteration in css code example

Example 1: css animation delay

/* Answer to: "css animation delay" */

/*
  The animation-delay property specifies a delay for the start of an animation.
*/

div {
  animation-delay: 2s;
}

Example 2: animation delay in css

if you have many element, whcih you want to make nice animation effact. then you 
just use same time, like all will be 2s, and make animation delay by growing like, first is 1s, second is 1.5s ... ... ... , then it will give you nice animation like tide :)


// In Example;

.s1 { animation: scale infinite linear 3s; animation-delay: 1.1s ; }
.s2 { animation: scale infinite linear 3s; animation-delay: 1.2s ; }
.s3 { animation: scale infinite linear 3s; animation-delay: 1.3s ; }
.s4 { animation: scale infinite linear 3s; animation-delay: 1.4s ; }
.s5 { animation: scale infinite linear 3s; animation-delay: 1.5s ; }
.s6 { animation: scale infinite linear 3s; animation-delay: 1.6s ; }
.s7 { animation: scale infinite linear 3s; animation-delay: 1.7s ; }
.s8 { animation: scale infinite linear 3s; animation-delay: 1.8s ; }
.s9 { animation: scale infinite linear 3s; animation-delay: 1.9s ; }
.s10{ animation: scale infinite linear 3s; animation-delay: 2.0s ; }
.s11{ animation: scale infinite linear 3s; animation-delay: 2.1s ; }