animation-timing-function

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

Syntax

The speed curve specifies the time an animation takes to complete. It is used to make the changes smoothly.

div.ex {
  animation-timing-function: ease-in-out;
}

Values

linear
The same speed from start to end is set for the animation.

ease
Default value. The animation starts and ends slowly.

ease-in
The animation starts slowly.

ease-out
The animation ends slowly.

ease-in-out
The animation starts and ends slowly.

step-start
The same as steps(1, start).

step-end
The same as steps(1, end).

steps(int, start|end)
Designates a function that steps using two parameters. First parameter is the number of steps in the function, which must be a positive value greater than 0. Second optional parameter is either “start” or “end”, specifying where the change of values occur within the interval. Default for the second value is “end”.

cubic-bezier(n,n,n,n)
Define custom values in the cubic-bezier function using numeric values from 0 to 1.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

User-submitted codepen.io examples of animation-timing-function ↴

@ByteAtATime

See the Pen on CodePen.

@themolitorThe labels on the boxes really help a lot. 👍

reply?

Want to Contribute?

Submit a codepen.io link that demonstrates animation-timing-function: