CSS3 transition-timing-function Property

Here is the brief explanation on how to specify the speed of the transition effect in CSS3.

Explanation

Property :

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

ease - Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))
linear - Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1))
ease-in - Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1))
ease-out - Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1))
ease-in-out - Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n) - Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.

Usage:


transition-timing-function: linear;
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;

Definition:

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

It takes the following values.
  • ease : Default value. Specifies a transition effect with a slow start, then fast, then end slowly .
  • linear : Specifies a transition effect with the same speed from start to end.
  • ease-in : Specifies a transition effect with a slow start.
  • ease-out : Specifies a transition effect with a slow end.
  • ease-in-out : Specifies a transition effect with a slow start and end.

Example 1:


<style>
.demodiv:hover {
width: 300px;
}
.demodiv{
width: 100px;height: 50px;
background: indigo;
color:white;text-align: center;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
transition-timing-function: linear;
-webkit-transition-timing-function: linear;
}
</style>
<div class='demodiv'>Linear</div>

Result:
Linear


Example 2:


<style>
.demodiv1:hover {
width: 300px;
}
.demodiv1{
width: 100px;
height: 50px;
background: indigo;
color:white;text-align: center;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
}
</style>
<div class='demodiv1'>
Linear
</div>

Result:
Ease-in



Ask Questions

Ask Question