CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES
SPONSORED LINKS

CSS3 transition-timing-function Property

Topic: CSS3 Properties Reference« Prev|Next »

Description

The transition-timing-function CSS property specifies how the intermediate values of the CSS properties being affected by a transition effect are calculated.

The following table summarizes the usages context and the version history of this property.

Default value: ease
Applies to: All elements, ::before and ::after pseudo-elements
Inherited: No
Animatable: No. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

transition-timing-function: 
linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit

The example below shows the transition-timing-function property in action.

  • button {
  •     background: #fd7c2a;
  •     /* For Safari 3.0+ */
  •     -webkit-transition-property: background;
  •     -webkit-transition-duration: 2s;
  •     -webkit-transition-timing-function: linear;
  •     /* Standard syntax */
  •     transition-property: background;
  •     transition-duration: 2s;
  •     transition-timing-function: linear;
  • }
  • button:hover {
  •     background: #3cc16e;
  • }

Property Values

The following table describes the values of this property.

Value Description
linear Specifies that the transition goes from its initial state to its final state, with a constant speed.
ease Similar to ease-in-out, though it accelerates more sharply at the beginning and the acceleration already starts to slow down near the middle of it.
ease-in Specifies that the transition begins slowly, then progressively accelerates until the final state is reached and the transition stops abruptly.
ease-out Specifies that the transition starts quickly then slow progressively down when approaching to its final state.
ease-in-out Specifies that the transition starts slowly, accelerates then slows down when approaching its final state.
cubic-bezier(n,n,n,n)
Defines a cubic Bezier curve. It is also known as speed curve. Possible values are numeric values from 0 to 1.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element transition-timing-function property.

Browser Compatibility

The transition-timing-function property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 4+ -moz-, 16+
  • Google Chrome 4+ -webkit-, 26+
  • Internet Explorer 10+
  • Apple Safari 3.1+ -webkit-, 6.1+
  • Opera 10.5+ -o-, 12.1+

Further Reading

See tutorial on: CSS3 Transitions.

Related properties: transition, transition-delay, transition-property, transition-duration.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.