- Description
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.
Pseudo classes that can be used to trigger transition: :link, :visited, :hover, :active, :focus.
See also:
- Live Example
- Play with the code in the textarea below.
- Values
- linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)
- Default value
- ease
- Introduced in CSS version
- 3
- Applies to elements
- All
- Inherited
- No
- 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
