CSS animation-timing-function Property

Definition and Usage

The animation-timing-function property sets how an animation spends its time between keyframes. linear keeps one speed. ease is slower at the ends. steps() jumps from stop to stop. The duration stays the same.

The initial value is ease, not linear. The property is not inherited, and it is not animatable. It applies to any element, including ::before and ::after. With one from and one to, the curve covers that whole trip. A middle keyframe splits the curve into separate pieces.

CSS Syntax

One easing function, or a comma-separated list with one function per animation name.

Property Values

unset equals initial here, so it is ease. revert uses the user-agent value, which is also ease. step-start is steps(1, start): one jump at the beginning.

How to Use animation-timing-function

Give the animation a start, an end, and a duration. Then choose how that time is spent.

1. Write an @keyframes rule with a from and a to. Point animation-name at it.
2. Set animation-duration above 0s. That is the length of the trip. The curve does not change it.
3. Set animation-timing-function. If you skip it, the browser uses ease.
4. For two animation names, list two functions in the same order. One function is repeated for every name.

Live Preview

The box travels the same distance in 2 seconds every time. Only the curve changes. Each choice replays the trip from the start.

CSS Examples

Each snippet uses the same move. The line to study is animation-timing-function. Use Try It Yourself for a live editor.

<style>
  @keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(120px); }
  }
  div {
    width: 80px;
    height: 80px;
    background: #1d4ed8;
    animation-name: slide;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  .even { animation-timing-function: linear; }
  .soft { animation-timing-function: ease; }
</style>

<div class="even">Linear</div>
<div class="soft">Ease</div>

<style>
  @keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(120px); }
  }
  div {
    width: 80px;
    height: 80px;
    background: #1d4ed8;
    animation-name: slide;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  .in { animation-timing-function: ease-in; }
  .out { animation-timing-function: ease-out; }
</style>

<div class="in">In</div>
<div class="out">Out</div>

<style>
  @keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(120px); }
  }
  div {
    width: 80px;
    height: 80px;
    background: #1d4ed8;
    animation-name: slide;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  .even { animation-timing-function: linear; }
  .jump { animation-timing-function: steps(4, end); }
</style>

<div class="even">Even</div>
<div class="jump">Steps</div>

Key Takeaways