animation-timing-function is used to specify the speed curve of an animation. The possible values are shown below:
- ease – specifies an animation with a slow start, then fast, then end slowly (this is default)
- linear – same speed from start to end
- ease-in – slow start
- ease-out – slow end
- ease-in-out – slow start and end
- cubic-bezier(n,n,n,n) – define your own values in a cubic-bezier function
The CSS syntax looks like this:
animation-delay defines the delay before an animation starts. The CSS syntax looks like this:
The animation-delay and animation-duration values can be defined in seconds (s) or milliseconds (ms).
animation-iteration-count property determines the number of times an animation repeats.
To make the animation repeat forever, just use the infinite value:
If you use 0 or a negative number for the
animation-iteration-count, the animation will never start.
animation-direction indicates how the keyframe should be applied. The values can be set as:
- normal – plays forward from 0 % to 100%
- reverse – plays from 100 % to 0%
- alternate – first forward, then backward, then forward
- alternate reverse – first backward, then forward, then backward