Transition-timing-function

Adjust the speed curve of a transition effect.

Syntax
      transition-timing-function: timing [,timing2] ;

ease - Slow start, then fast, then end slowly. (Default) Equivalent to cubic-bezier(0.25,0.1,0.25,1)
ease-in - Slow start. Equivalent to cubic-bezier(0.42,0,1,1)
ease-out - Slow end. Equivalent to cubic-bezier(0,0,0.58,1)
ease-in-out - Slow start and end. Equivalent to cubic-bezier(0.42,0,0.58,1)
linear - The same speed transition from start to end. Equivalent to cubic-bezier(0,0,1,1)
cubic-bezier(x1, y1, x2, y2) - Define a specific cubic-bezier function. Values for x and y are numerics from 0 to 1
steps - A stepped timing function that takes two parameters. The first parameter specifies the number of intervals; the optional second parameter specifies the point in the interval where the property value changes. The second parameter is constrained to the values "start" or "end", which is the default.
step-start - A stepped timing function that is equivalent to "steps(1, start)".
step-end - A stepped timing function that is equivalent to "steps(1, end)".

To specify a cubic bezier curve, give the X and Y values for 2 of the control points of the curve. Point P0 is implicitly set to (0,0) and P3 is implicitly set to (1,1).

If more than one transition timing is given they will apply in turn to the (multiple) transition elements specified with transition-property.

Transitions are typically applied to CSS properties that are set to change on hover, if assigned to the normal state, the animation would run immediately when the page is loaded.

Examples:
h1 { transition-timing-function: ease; }
.emw3class { transition-timing-function: steps(4, end); }
#emw3id { transition-timing-function: cubic-bezier(0,0,1,0); }

Try it:

(CSS 3) Browser Support: IE 10 only, use the equivalent -moz-transition-timing-function for Firefox and -webkit-transition-timing-function for Safari and Chrome.

“It's no delay to stop to edge the tool” ~ Irish Saying

Related:

transition-property - Apply a transition effect to one or more CSS properties.
transition-duration - The time a CSS transition effect takes to complete.
transition-delay - Delay before the CSS transition is displayed.
transition - Shorthand to set the four transition- properties.