transition-timing-function
Summary
Sets the pace of action within a transition
Overview table
- Initial value
ease- Applies to
- all elements
- Inherited
- No
- Media
- interactive
- Computed value
- as specified
- Animatable
- No
- CSS Object Model Property
transitionTimingFunction- Percentages
- N/A
Syntax
transition-timing-function: cubic-bezier()transition-timing-function: steps()transition-timing-function: easetransition-timing-function: ease-intransition-timing-function: ease-in-outtransition-timing-function: ease-outtransition-timing-function: lineartransition-timing-function: step-endtransition-timing-function: step-start
Values
- ease
- Default. Starts and stops gradually, equivalent to cubic-bezier(0.25,0.1,0.25,1)
- linear
- Starts and stops immediately, progressing at a constant rate, equivalent to cubic-bezier(0,0,1,1).
- ease-in
- Starts gradually and stops suddenly, equivalent to cubic-bezier(0.42,0,1,1).
- ease-out
- Starts suddenly and stops gradually, equivalent to cubic-bezier(0,0,0.58,1).
- ease-in-out
- Starts and stops gradually, equivalent to cubic-bezier(0.42,0,0.58,1).
- cubic-bezier()
- Function value specifying a customized response curve.
- steps()
- Function value specifying a series of discrete intervals.
- step-start
- The change occurs instantly at the start of the keyframe, equivalent to steps(1, start).
- step-end
- The change occurs instantly at the end of the keyframe, equivalent to steps(1, end).
Examples
Default transition timing
transition-timing-function: ease;
A series of elements animate in progression. View live example
No easing behavior: animation starts and stops abruptly and proceeds at a constant rate.
transition-timing-function: linear;
See how changing the timing value affects a sequence of two transitions
Usage
Along with other transition properties, multiple values
separated by commas apply to transitions in the same order as they are listed by the transition-property property. Excess values are ignored. If there are fewer timing values than transitions, they’re recycled in order of declaration until their numbers match.
Related specifications
- CSS Transitions
- W3C Working Draft
Attributions
Microsoft Developer Network: [Windows Internet Explorer API reference Article]