CSS Reference Manual

CSS @rules (RULES)

Comprehensive List of CSS Properties

CSS unicode-bidi Attribute CSS3 transition-property Attribute

CSS3 transition-timing-Usage methods and examples of function property

transition-timing-The function CSS property specifies the speed of the transition effect. This property allows a transition effect to change the speed of its duration.

The following table provides usage descriptions and version histories of this property, as well as the syntax of its usage in JavaScript scripts.

Default value:	ease
Applies to:	All elements::before and::after Pseudo-element
Inheritance:	None
Animatable:	No.See also Animation properties.
Version:	CSS3new feature
JavaScript syntax:	object.style.transitionTimingFunction="ease"-in"

transition-timing-The syntax of function usage

The syntax of this attribute is as follows:

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

The following examples demonstrate how to use transition-timing-function Attribute.

Example

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

Test to see‹/›

Attribute Value

The following table describes the values of this attribute.

Value	Description
linear	Specify a transition at a constant speed from the initial state to the final state.
ease	Similar to fade in and fade out, although it accelerates faster at the beginning and has started to decelerate near the middle.
ease-in	Specify that the transition starts slowly, then accelerates gradually, until it reaches the final state and the transition stops suddenly.
ease-out	Specify that the transition starts quickly and then slows down gradually as it approaches its final state.
ease-in-out	Specify that the transition starts slowly, then accelerates, and then decelerates when transitioning to the final state.
cubic-bezier(n,n,n,n)	Define a cubic Bezier curve. Also known as a speed curve. Possible values are from 0 to1The values between.
initial	Set this attribute to its default value.
inherit	If specified, the associated element adopts the parent element's transition.-timing-The value of the function attribute.

Browser Compatibility

transition-timing-The compatibility of the function attribute across browsers, the numbers in the table below represent the minimum version of the browser that supports this attribute; all mainstream browsers support this attribute.

	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+