CSS animation-timing-function Property

Description

The animation-timing-function CSS property specifies the speed curve of an animation. The speed curve defines how the animation progresses through the duration of each cycle. It is used to make the changes smoothly and create different effects, such as easing in, easing out, or easing in and out.

Initial value
ease
Applies to
All elements, :before and :after pseudo elements
Inherited
No
Computed value
As specified
Animatable
No
JavaScript syntax
object.style.animationTimingFunction

Interactive Demo

Syntax

animation-timing-function: <single-timing-function> [ ',' <single-timing-function> ]* 

Values

<single-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="progress"></div>
.progress { 
   background: #333;
   border: 2px solid #333; 
   height: 20px;
   position: relative; 
} 
.progress::before{ 
   animation: progress 5s; 
   animation-timing-function: linear; 
   animation-duration: 5s; 
   animation-fill-mode: forwards; 
   -webkit-animation-name: progress; 
   -webkit-animation-timing-function: linear; 
   -webkit-animation-duration: 5s; 
   -webkit-animation-fill-mode: forwards; 
   content: ""; 
   position: absolute; 
   height: 100%;  
   background: #FFA600; 
} 
@-webkit-keyframes progress { 
   from { 
      width: 0; 
   } 
   to { 
      width: 100%; 
   } 
} 
@keyframes progress { 
   from { 
      width: 0; 
   } 
   to { 
      width: 100%; 
   } 
}

Browser Support

The following table will show you the current browser support for the CSS animation-timing-function property.

Desktop
Edge Chrome Firefox Opera Safari
124316309
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
4316309443

Last updated by CSSPortal on: 31st December 2023