animation-timing-function property in CSS

A simple animation-timing-function property example:

animation-timing-function: linear;

Laboratory

description & Usage

The animation-timing-function property determines the speed of an animation curve.

The speed curve is executed when an anima

tion wants to be transferred from CSS styles to other styles and uses new data.

#	Description
Default Value	ease
Inherited	no
Animatable	no
Version	CSS3
JavaScript syntax	object.style.animationTimingFunction="linear"

The numbers inserted in the browser fields indicate the version that supports the animation-timing-function property.

#	Chrome	Edge	Firefox	Safari	Opera
animation-timing-function

animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

Values	Description
linear	The speed of the animation is uniform from the beginning to the end.
ease	Animation speed is divided into 3 playbacks: Part I: Slow Start. Part II: A quick continuation. Third part: slow ending.
ease-in	The animation starts playing slowly.
ease-out	The animation ends slowly.
ease-in-out	The animation will start and end slowly.
step-start	equals steps(1, start)
step-end	equal steps(1, end)
steps(int,start\|end)
cubic-bezier(n,n,n,n)	Values are between 0 and 1.
initial	Adds this value to its default property.
inherit	It inherits this value from its parent tag.

CSS tutorial: CSS animations

HTML DOM reference: animationTimingFunction property