CSS animation-timing-function Property

CSS animation-timing-function

The animation-timing-function property in CSS specifies how the animation progresses over time. It defines the speed curve of the animation, determining whether the animation starts slowly, speeds up, or has a consistent speed throughout its duration.

Syntax of animation-timing-function

</>

Copy

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;

Values

Value	Description
`linear`	The animation progresses at a constant speed.
`ease`	The animation starts slow, accelerates, and then slows down towards the end. This is the default value.
`ease-in`	The animation starts slow and accelerates towards the end.
`ease-out`	The animation starts fast and slows down towards the end.
`ease-in-out`	The animation starts slow, accelerates, and then slows down.
`step-start`	The animation jumps immediately to the first step.
`step-end`	The animation jumps immediately to the final step.
`steps(int, start \| end)`	Defines an animation with a specific number of steps. `start` begins each step at the start of the interval, and `end` ends each step at the end of the interval.
`cubic-bezier(n,n,n,n)`	Defines a custom speed curve using cubic-bezier function. Each `n` is a value between 0 and 1.
`initial`	Sets the property to its default value (`ease`).
`inherit`	Inherits the value from the parent element.

Default Value

ease

Examples for animation-timing-function

Using the CSS animation-timing-function Property

The following examples demonstrate how the animation-timing-function property can be used to create various animation speed curves.

</>

Copy

/* Linear animation */
.element {
  animation-timing-function: linear;
}

/* Ease animation */
.element {
  animation-timing-function: ease;
}

/* Ease-in animation */
.element {
  animation-timing-function: ease-in;
}

/* Ease-out animation */
.element {
  animation-timing-function: ease-out;
}

/* Custom cubic-bezier curve */
.element {
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

Example 1: Applying animation-timing-function

The following example demonstrates how to use different timing functions for animations that move elements horizontally.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  @keyframes move {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(200px);
    }
  }

  .linear {
    animation: move 3s linear infinite;
    background-color: lightgreen;
  }

  .ease {
    animation: move 3s ease infinite;
    background-color: lightblue;
  }

  .ease-in {
    animation: move 3s ease-in infinite;
    background-color: lightcoral;
  }

  .cubic-bezier {
    animation: move 3s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    background-color: lightyellow;
  }
  
  div {
    width: 200px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 10px;
    padding: 10px;
    border: 2px solid;
  }
</style>
</head>
<body>

<h1>CSS animation-timing-function Example</h1>

<div class="linear">Linear</div>
<div class="ease">Ease</div>
<div class="ease-in">Ease-in</div>
<div class="cubic-bezier">Cubic Bezier</div>

</body>
</html>

Linear (`.linear`)

The animation-timing-function is set to linear.
The animation progresses at a constant speed throughout its duration.
The box moves from translateX(0) to translateX(200px) at a steady pace without acceleration or deceleration.
The result is a light green box that slides smoothly to the right at a uniform speed.

Ease (`.ease`)

The animation-timing-function is set to ease.
The animation starts slowly, accelerates in the middle, and slows down toward the end.
This creates a natural, smooth motion that mimics real-world acceleration and deceleration.
The result is a light blue box that gradually gains and loses speed as it slides to the right.

Ease-in (`.ease-in`)

The animation-timing-function is set to ease-in.
The animation starts slowly and accelerates toward the end.
The initial part of the animation is gradual, and it speeds up as it approaches translateX(200px).
The result is a light coral box that begins moving slowly and then quickly slides to the right.

Cubic Bezier (`.cubic-bezier`)

The animation-timing-function is set to cubic-bezier(0.25, 0.1, 0.25, 1).
The cubic Bezier function creates a custom timing curve that defines the animation’s speed changes.
In this case, the timing curve mimics the ease behavior, with a smooth start, acceleration in the middle, and a slow finish.
The result is a light yellow box that moves with a custom acceleration and deceleration effect based on the Bezier curve.

Browser Support

The animation-timing-function property is supported in most modern browsers. Below is a compatibility table:

Browser	Version
Chrome	43
Edge	10
Firefox	16
Safari	9
Opera	30

TutorialKart

CSS animation-timing-function Property