CSS animation-timing-function Property

The animation-timing-function property is used to specify a timing function which defines the speed over time of an object being animated. It describes how an animation will progress over one cycle of its duration, allowing it to change speed during its course.

The CSS animation-timing-function property allows you to specify how an animation will progress over one cycle of its duration.

The animation-timing-function property in CSS is used to specify how the animation makes transitions through keyframes. That is, it is used to specify the motion of animation during transitions.

CSS Syntax

animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

Property Value:

  • ease: With this property value, the animation starts slowly, then fast, and then finally ends slowly (this is default).
  • linear: If this value is specified for the property then the animation plays with the same speed from start to end.
  • ease-in: If this value is specified then the animation begins with a slow start.
  • ease-out: If this value is specified for the property then the animation plays normally but ends slow. This is similar to ease-in.
  • ease-in-out: With this property value, the animation both starts and ends slow.

Example -