The animation-timing-function property allows as defining the speed curve of the animation, or in other words it allows us to smoothly apply style changes from one to another by using time settings. 

Syntax:

selector { 

    animation-timing-function: linear | ease | ease-in | ease-out | cubic-bezier(n,n,n,n) | initial | inherit;

}

Values:

The values possible for the animation-timing-function property are:

  • linear; Equivalent to cubic-bezier (0, 0, 1, 1); The effect always has the same speed of transition.
  • ease; The default value which makes the transition starts slow, then fast, and then slow at the end; Equivalent to cubic-bezier (0.25, 0.1, 0.25, 1)
  • ease-in; Makes the transition starts slowly; Equivalent to cubic-bezier (0.42, 0, 1, 1).
  • ease-out; Makes the transition ends slowly; Equivalent to cubic-bezier (0, 0, 0.58, 1).
  • ease-in-out; Makes the transition starts and ends slowly; Equivalent to cubic-bezier (0.42, 0, 0.58, 1).
  • cubic-bezier (); Custom defined values in a cubic-bezier function; All values must be numeric.
  • step-start; Equivalent to steps (1, start).
  • step-end; Equivalent to steps (1, end).
  • steps (); Makes the transition appears in defined steps; It received two values, where the first value is a number of intervals to be executed, and the second must be a keyword start or end. These keywords refer to the points in transition where changes will occur and if omitted the end is taken as default.
  • initialinherit

This property, as well as the transition-timing-function property, uses a mathematical function (Cubic Bezier curve) to make speed changes.

Example

The example with the animation-timing-function property and various settings:

 

›› go to examples ››