Animation Timing

CSS animation-delay Property

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

The following example has a 2 seconds delay before starting the animation:

Example

div {

width: 100px;
  height: 100px;

position: relative;
  background-color: red;
  animation-name:
  myAnimation;

animation-duration: 4s;
  animation-delay: 2s;
}

Negative values are also allowed. If using negative values, the animation will start as if it had already been playing for N seconds.

In the following example, the animation will start as if it had already been playing for 2 seconds:

Example

div {

width: 100px;
  height: 100px;

position: relative;
  background-color: red;

animation-name: myAnimation;

animation-duration: 4s;
  animation-delay: -2s;
}

CSS animation-iteration-count Property

The animation-iteration-count property specifies the number of times an animation should run.

The following example will run the animation 3 times before it stops:

Example

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name:
  myAnimation;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

The following example uses the value "infinite" to make the animation continue for ever:

Example

div {

width: 100px;
  height: 100px;

position: relative;
  background-color: red;
  animation-name:
  myAnimation;
  animation-duration: 4s;

    animation-iteration-count:
infinite;
}

CSS animation-timing-function Property

The animation-timing-function property specifies the speed curve of the animation.

The animation-timing-function property can have the following values:

• ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)
• linear - Specifies an animation with the same speed from start to end
• ease-in - Specifies an animation with a slow start
• ease-out - Specifies an animation with a slow end
• ease-in-out - Specifies an animation with a slow start and end
• cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function

The following example shows some of the different speed curves that can be used:

Example

#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;}