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;
}Live preview
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;
}Live preview
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;
}Live preview
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;
}Live preview
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;}Live preview