This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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: ease
  • transition-timing-function: ease-in
  • transition-timing-function: ease-in-out
  • transition-timing-function: ease-out
  • transition-timing-function: linear
  • transition-timing-function: step-end
  • transition-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;

View live example

See how changing the timing value affects a sequence of two transitions


View live example

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