CSS animation-timing-function Property

What You’ll Learn

The animation-timing-function property shapes how fast an animation moves between keyframes. It controls acceleration and deceleration, not the total duration.

Definition and Usage

The animation-timing-function CSS property defines how intermediate values are calculated during an animation. It controls the speed curve, meaning how quickly the animation accelerates, decelerates, or stays constant over time.

Two animations can have the same duration and keyframes but feel completely different because of their timing function. A menu slide might use ease-out to slow down gently at the end, while a loader might use linear for steady rotation.

📝 Syntax

Set animation-timing-function to a keyword, steps(), or cubic-bezier():

selector {
  animation-timing-function: timing-function;
}

Basic Example

@keyframes move {
  0% { left: 0; }
  100% { left: 300px; }
}

.box {
  animation-name: move;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

Syntax Rules

• The initial value is ease.
• Keyword values include linear, ease-in, ease-out, and ease-in-out.
• cubic-bezier(x1, y1, x2, y2) creates a custom curve with four control points.
• steps(n, start|end) divides the animation into discrete jumps.
• For multiple animations, list timing functions in the same order as animation-name.

Default Value

The initial value of animation-timing-function is ease. The animation starts slowly, speeds up in the middle, and slows down again before finishing.

💎 Property Values

These are the timing functions you will use most often when building animations.

Timing Function vs Duration

These two properties work together but control different things:

A 2-second animation with linear moves evenly for the full 2 seconds. The same 2-second animation with ease-in still lasts 2 seconds, but most of the visible movement happens near the end.

Understanding cubic-bezier()

cubic-bezier(x1, y1, x2, y2) lets you design a custom easing curve. Each value is between 0 and 1 for the control points that shape acceleration:

.card {
  animation: slideUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

Common presets like ease and ease-in-out are built-in cubic-bezier curves. Custom values are useful when you want a snappier or more playful feel than the keywords provide.

linear vs ease-in-out

Examples Gallery

Try animation-timing-function with ease-in-out motion, linear vs ease comparison, custom cubic-bezier curves, and stepped animation.

<style>
  @keyframes move {
    0% { left: 0; }
    100% { left: 300px; }
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    animation-name: move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }
</style>

<div class="box"></div>

.linear-box {
  animation: move 3s linear infinite;
}

.ease-out-box {
  animation: move 3s ease-out infinite;
}

.toast {
  animation: slideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.loader {
  animation: progress 2s steps(4, end) infinite;
}

💡 Best Practices