CSS Animation Timing
This page covers the CSS animation timing properties: delay, iteration count, and timing function.
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;
}
Try it Yourself »
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;
}
Try it Yourself »
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;
}
Try it Yourself »
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;
}
Try it Yourself »
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 endease-in- Specifies an animation with a slow startease-out- Specifies an animation with a slow endease-in-out- Specifies an animation with a slow start and endcubic-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;}
Try it Yourself »
