The transition-timing-function property controls the relative speed of the transition over the transition-duration to make the transition start slowly and end quickly. 

Syntax:

selector { 

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

}

Values:

The values possible for the transition-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(n,n,n,n); 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(interval,start|end); 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.
  • initial, inherit

Example

The transition-timing-function property with cubic-bezier example:

 

›› go to examples ››