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. 6m406w

A timing function in CSS is usually referred to easing functions.

The animation-timing-function takes a timing function as a value, which is a mathematical function that specifies the speed over time of an object being animated. It can also be defined using one of several predefined keywords for common timing functions.

If you apply more than one animation-name property.

The timing function specified applies to each iteration of the animation, not the entire animation in full. For example, if an animation has animation-timing-function: ease-in-out; and animation-iteration-count: 2;, it will ease in at the start, ease out as it approaches the end of its first iteration, ease in at the start of its second iteration, and ease out again as it approaches the end of the animation.

For keyframed animations, the timing function applies between keyframes rather than over the entire animation. In other words, the timing function is applied at the start of a keyframe and at the end of a keyframe.

In addition to being able to specify a timing function for an overall animation, you can specify an animation timing function for an individual keyframe of the animation inside the keyframe rule that is used to animate the element in that keyframe as it proceeds to the next keyframe (See the Examples section below for an example). If no timing function is specified for the keyframe, the timing function specified for the overall animation is used. You can read more about this and see an example in the @keyframes entry.

It is usually more convenient to specify the animation-timing-function in the animation shorthand property.

.element {
    animation-name: rotate, fall;
    animation-timing-function: ease-in, ease-in-out;
}
                

@keyframes bounce {

  from {
    top: 100px;
    animation-timing-function: ease-out;
  }

  25% {
    top: 50px;
    animation-timing-function: ease-in;
  }

  50% {
    top: 150px;
    animation-timing-function: ease-out;
  }

  75% {
    top: 75px;
    animation-timing-function: ease-in;
  }

  to {
    top: 100px;
  }

}
                

animation-timing-function: linear;
animation-timing-function: cubic-bezier(0.42, 0, 1, 1); /* equivalent to the "ease-in" keyword */
animation-timing-function: steps(4, start); 
animation-timing-function: ease-in-out;