Search within TutorialsPark

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.


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 animation-timing-function property. internetexplorer safari firefox opera chrome

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.

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 animation-timing-function
Value <timing-function>#
Initial Value ease
Applies to block-level and inline-level elements
Javascript syntax object.style.animationTimingFunction="ease-in"
Inherited No
Computed Value Same as declared value
Browser Support internetexplorer safari firefox opera chrome

Related Examples.