transition-timing-function property is used to specify how the intermediate values of the CSS properties being affected by a transition effect should be calculated. This in essence lets you establish an acceleration curve, so that the speed of the transition can vary over its duration.
This acceleration curve is defined using one
<timing-function> for each property to be transitioned. A timing function in CSS describes how intermediate values during a transition will be calculated, and are usually referred to in CSS as easing functions.
The initial value of CSS
transition-timing-function property is
ease. You can apply it to all elements including
::after pseudo-elements. This property is not inheritable. The final computed value of the
transition-timing-function property is the exact same value that you initially supplied. This property is not animatable.
This is the formal syntax for using transition-timing-function property.
transition-timing-function: <timing-function># where <timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( <integer> [, [ start | end ] ]? ) | cubic-bezier( <number>, <number>, <number>, <number> )
Here are some examples of using this property.
/* Keyword values */ transition-timing-function: ease; transition-timing-function: ease-in; transition-timing-function: ease-out; transition-timing-function: ease-in-out; transition-timing-function: linear; transition-timing-function: step-start; transition-timing-function: step-end; /* Function values */ transition-timing-function: steps(4, end); transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); /* Multiple timing functions */ transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* Global values */ transition-timing-function: inherit; transition-timing-function: initial; transition-timing-function: unset;
<timing-function> represents the timing function to link to the corresponding property to transition, as defined in CSS
The CSS3 Transitions property is fully supported in 94.29% browsers and partially supported in 0% browsers. Therefore, its overall browser support is 94.29%.
This property is fully supported in IE 10+, Edge 12+, Firefox 16+, Chrome 26+, Safari 7+, Opera 15+, iOS Safari 8+, Android 53+ and Chrome for Android 56+. Support listed is for
transition properties as well as the
In Chrome (up to 43.0), for CSS
transition-delay property, either explicitly specified or written within transition property, the unit cannot be omitted even if the value is 0.
IE10 & IE11 are reported to not support transitioning the
Browser support data has been taken from caniuse.com.
- Read more about the CSS
<transition-timing-function>property on MDN.
- You can also read the CSS
<transition-timing-function>property on CSSWG.
2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.