Search within TutorialsPark

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,.


linear

ease

ease-in

ease-out

ease-in-out

steps(5)

step-start

step-end

cubic-bezier(1,-0.1,0.8,1)

Syntax:

CSS3 transition-timing-function property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note-Not supported in IE 9 or previous versions.

Property Values

Value Description
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

Specifications

Specs Value
Name transition
Value <single-transition-timing-function> [','<single-tansition-timing-function>]*
Initial Value ease
Applies to all elements, :before and :after pseudo elements
Javascript syntax object.style.transitionTimingFunction="height 5s"
Inherited No
Computed Value Same as declared Value
Browser Support internetexplorer safari firefox opera chrome

Related Examples.