Transition-timing-function sets the timing function to be used by the transition.
- linear Constant speed
- ease Default, gradual slowdown
- ease-in Speed up
- ease-out Slow down
- ease-in-out Speed up then slow down
- cubic-bezier(x1, y1, x2, y2) X and Y values are between 0 and 1 to define the shape of a bezier curve. This can be used to define custom timings.
For transition to work you must target the element with a selector and specify the properties and duration. You also need to change the value of the property after an event such as hover.
- Live Example
- Play with the code in the textarea below.
- linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)
- Default value
- Introduced in CSS version
- Applies to elements
- Browser Support
Browsers IE Firefox Safari Opera Chrome Versions 10 -moz- -webkit- -o- -webkit-
See the full list CSS properties and browser support: CSS Properties