animation-timing-function

Allows you to time your animations. The CSS property determines how an animation progresses through each cycle's duration.

Example

Initial value ease
Applies to all elements in the page

Syntax

  
animation-timing-function: ease-out;
  

Values

Increases in speed until the middle of the animation, and slows down towards the end. Equals to cubic-bezier(0.25, 0.1, 0.25, 1.0).
Animates at a steady speed. Equals to cubic-bezier(0.0, 0.0, 1.0, 1.0).
Animation starts slowly, with the speed of the transition of the animating property increasing until the end of animation. Equals to cubic-bezier(0.42, 0, 1.0, 1.0).
Animation starts quickly, slows down towards the end of animation. Equals to cubic-bezier(0, 0, 0.58, 1.0).
Speeds up in the beginning and slows down towards the end of animation. Equals to cubic-bezier(0.42, 0, 0.58, 1.0)
Based on a cubic bezier curve function.

Browser support

animation-timing-function 1 1 3.5 1 12 3

We use cookies to improve your experience. Learn more in our Privacy policy.

×