CSS3 animation-direction Property
To control the rate of the animation.
Definition and Notes.
1. The CSS3 animation-timing-function property specifies the speed of an animation within the allotted animation duration function.
2. Its sets the pace of transition to the next keyframe, it can also be used to set the default timing function for keyframes.
CSS3 animation-timing-function property.
View in Splitscreen»
Code-Editor:Note- The values must be specified before the animation begins, it won't affect after the animation is set to play.
|linear||The rate of transition remains constant from start to end|
|ease||The transition begins quickly and then gradually slows down|
|ease-in||Begins slowly and then ends then speeds up towards the end.|
|ease-out||The transition begins quickly and stays quick longer than ease, and then slows down and ends abruptly|
|ease-in-out||Accelerates in the beginning and then decelerates in the end.|
|cubic-bezier(n,n,n,n)||Transition is applied using a custom cubic bezier curve|
|step-start||Tansition is applied at the start of the step|
|step-end||Transiton is applied at the end of the step|
|steps()||Change is introduced in steps specified within the brackets|
|Applies to||block-level and inline-level elements|
|Computed Value||Same as declared value|