CSS animation-timing-function Property

Description

The animation-timing-function property determines the speed curve for the animation (a mathematical function is used - the cubic Bezier curve). The speed curve defines the animation time used to change one set of CSS styles to another.

Initial value

ease

Applies to

All elements, :before and :after pseudo elements

Inherited

No

Media

Visual

Computed value

As specified

Animatable

No

CSS Version

CSS3

JavaScript syntax

object.style.animationTimingFunction

Syntax

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

Values

• 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

Desktop
10	12	43	16	30	9
Tablets / Mobile
43	43	16	30	9	4.0

Last updated by CSSPortal on: 17th October 2019