Loading lesson path
Formula
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;Formula
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;
}Formula
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;Formula
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;Formula
animation - name:myAnimation;
animation-duration: 4s;Formula
animation - iteration - count:infinite;
}Formula
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
Formula
- 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 functionThe following example shows some of the different speed curves that can be used:
#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;}