The transition-timing-function
sets the transition speed curve.
The speed curve specifies the speed and acceleration of a transition.
Options include ease-in
, steps
, and bezier
.
An element with a transition-timing-function
value of ease
.
Hover over the rectangle to see the width
speed curve - initially fast and then slower.
<style>
.transition-timing {
width: 100px;
height: 100px;
background: orangered;
cursor: pointer;
transition: width 1.5s;
transition-timing-function: ease;
}
.transition-timing:hover {
width: 350px;
}
</style>
<div class="transition-timing"></div>
The transition-timing-function
property sets the transition effect.
Transition timing functions are also referred to as easing functions.
Easing functions can be specified by keyword, a stepping function, or a cubic Bézier curve.
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | isnherit;
Value | Description |
---|---|
ease | Default. Sets a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)) |
linear | Sets a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)) |
ease-in | Sets a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)) |
ease-out | Sets a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)) |
ease-in-out | Sets a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)) |
step-start | Equivalent to steps(1, start) |
step-end | Equivalent to steps(1, end) |
steps(int,start|end) | Sets a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "end" |
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 the value to its default value. |
inherit | Inherits the value from its parent element. |
Click the buttons to see the different transition-timing-function
values.
Hover over the rectangle to start the animation.
<style>
.transition-timing-example {
width: 100px;
height: 100px;
background: orangered;
cursor: pointer;
transition: width 1s;
transition-timing-function: linear;
}
.transition-timing-example:hover {
width: 400px;
}
</style>
<div class="transition-timing-example"></div>
This table shows when transition-timing-function
support started for each browser.
Chrome
|
26.0 | Mar 2013 |
Firefox
|
16.0 | Oct 2012 |
IE/Edge
|
10.0 | Sep 2012 |
Opera
|
12.1 | Nov 2012 |
Safari
|
6.1 | Jun 2013 |