CSS Timing Function

When creating an animation in CSS, the timing function determines how an animation progresses through the duration of each cycle. This gives the page author great control over the behavior of the animated element.

The Mozilla Developer Network (MDN) contains complete definitions and reference documentation on the easing function and all other CSS properties.

The CSS property syntax used for each example below has been included for convenience. All of the example animations have the same ten second repeating duration.

Linear

animation-timing-function: linear;

Linear animates at an even speed from start to finish.

Ease

animation-timing-function: ease;

With ease timing, the animation has a slow start, then fast, before it ends slowly.

Ease In

animation-timing-function: ease-in;

Slow start, then an even speed.

Ease Out

animation-timing-function: ease-out;

Even speed to a slow end.

Ease In Out

animation-timing-function: ease-in-out;

Slow start, even speed, and slow end.

Cubic Bezier

animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1).

A Cubic Bezier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve and, in CSS these points are fixed as the coordinates are ratios. P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state. Any values between 0 and 1 are valid.

Steps

animation-timing-function: steps(5, jump-both)

Displays an animation iteration along stops through the animation, displaying each stop for equal lengths of time. There are several optional parameters that can be used to further customize the animation. See the MDN animation timing function reference for a list and explanation for each additional parameter.