CSS transition-timing-function Property
Description
The transition-timing-function
CSS property determines the speed curve or timing function used for transitioning between CSS property values. It defines how intermediate values between the start and end points of a transition are calculated and displayed over time. Timing functions can range from linear (constant speed) to ease-in-out (gradually accelerating and decelerating). By specifying a timing function, web designers and developers can control the visual effect and perceived smoothness of transitions, enhancing user experiences when elements change in response to user interactions or other events on a webpage.
- Initial value
- ease
- Applies to
- All elements, :before and :after pseudo elements
- Inherited
- No
- Computed value
- Same as specified value
- Animatable
- No
- JavaScript syntax
- object.style.transitionTimingFunction
Interactive Demo
to see transition.
Syntax
transition-timing-function: <single-transition-timing-function> [ ',' <single-transition-timing-function> ]*
Values
<single-transition-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>)- easeThe ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
- linearThe linear function is equivalent to cubic-bezier(0, 0, 1, 1).
- ease-inThe ease-in function is equivalent to cubic-bezier(0.42, 0, 1, 1).
- ease-outThe ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1).
- ease-in-outThe ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58, 1)
- step-startThe step-start function is equivalent to steps(1, start).
- step-endThe step-end function is equivalent to steps(1, end).
- steps(<integer>[, [ start | end ] ]?) Specifies a stepping function, described above, taking 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(<number>, <number>, <number>, <number>)Specifies a cubic-bezier curve. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid. The y values can exceed this range.
Example
<div class="test"> ease </div>
<div class="test2"> linear </div>
<div class="test3"> ease-in </div>
<div class="test4"> ease-out </div>
<div class="test5"> ease-in-out </div>
<div class="test6" > cubic-bezier </div>
div {
transition-duration: 1s;
width: 100px;
height: 60px;
background-color: khaki;
display: inline-block;
border: 2px solid orange;
margin-bottom: 13px;
}
div:hover {
height: 250px;
background-color: moccasin;
}
.test {
transition-timing-function: ease;
}
.test2 {
transition-timing-function: linear;
}
.test3 {
transition-timing-function: ease-in;
}
.test4 {
transition-timing-function: ease-out;
}
.test5 {
transition-timing-function: ease-in-out;
}
.test6 {
transition-timing-function: cubic-bezier (0.5,0.05,0.7,0.5);
}
Browser Support
The following table will show you the current browser support for the CSS transition-timing-function
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 26 | 16 | 12.1 | 9 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
26 | 16 | 12.1 | 9 | 1.5 | 4.4 |
Last updated by CSSPortal on: 2nd January 2024