CSS transition-timing-function Property

Description

The transition-timing-function property is used to describe how the intermediate values of the CSS properties being affected by a transition effect are calculated. This in essence lets you establish an acceleration curve, so that the speed of the transition can vary over its duration.

Initial value
ease
Applies to
All elements, :before and :after pseudo elements
Inherited
No
Media
Interactive
Computed value
Same as specified value
Animatable
No
CSS Version
CSS3
JavaScript syntax
object.style.transitionTimingFunction

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

Desktop
Explorer Edge Chrome Firefox Opera Safari
1012261612.19
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
4.4261612.191.5

Last updated by CSSPortal on: 2nd November 2019