transition-timing-function Description:
The transition-timing-function property defines hw the intermediate values for the transition should be calculated.
transition-timing-function in CSS Versions:
transition-timing-function Syntax:
transition-timing-function : timing function
There are several keywords you can use for the timing function:
ease(default)—equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)linear—equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)ease-in—equivalent to cubic-bezier(0.42, 0, 1.0, 1.0)ease-out—equivalent to cubic-bezier(0, 0, 0.58, 1.0)ease-in-out—equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)cubic-bezier(number, number, number, number)—Use to define your own curve
transition-timing-function Initial Value:
ease
transition-timing-function Applies to:
all elements that can have transitions
transition-timing-function Inheritance:
Not inherited
transition-timing-function Browser Support:
The transition-timing-function is supported by modern browsers:
- Safari 3.1+ (using
-webkit-prefix) - Chrome 3.2+ (using
-webkit-prefix) - iOS 3.2+ (using
-webkit-prefix) - Android 2.1+ (using
-webkit-prefix) - Opera 10.5+ (using
-o-prefix) - Opera Mobile 10+ (using
-o-prefix) - Firefox 4+ (using
-moz-prefix) - Internet Explorer 10+ (using
-ms-prefix)
transition-timing-function Media Type:
interactive
transition-timing-function Examples:
Set the transition to use a linear timing function:
transition-timing-function: linear;
transition-timing-function Special Notes:
The easiest way to check the timing function is to set up your transition, and then test each keyword to see which one looks the best.
The transition-timing-function does nothing if the other two transition properties, transition-property and transition-timing-function are not set.
More Information on the transition-timing-function CSS Property
More help with CSS 3
Return to the Style Library
