CSS3 transition-timing-function Property
To Specify the function used to calculate intermediate property values during the transition.
Definition and Notes.
1. The CSS3 transition-timing-function property defines the speed of a transition within the specified duration, giving you control over animations pace.
2.The property has two values either a keyword or a cubic-bezier function,.
CSS3 transition-timing-function property.
View in Splitscreen»
Code-Editor:Note-Not supported in IE 9 or previous versions.
|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||all elements, :before and :after pseudo elements|
|Computed Value||Same as declared Value|