CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES
Advertisements

CSS3 transition-timing-function Property

Topic: CSS3 Properties ReferencePrev|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.

Advertisements
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties