CSS animation-timing-function Property

Description

The CSS animation-timing-function property defines how the intermediate states of an animation are calculated over its duration, essentially controlling the pacing of the animation. While an animation consists of a sequence of frames changing from a starting state to an ending state, the timing function determines the rate at which the animation progresses at each point in time. Without this property, animations would progress at a uniform speed, which can feel unnatural or mechanical. By customizing the timing function, developers can create effects that feel more dynamic, like bouncing, accelerating, or decelerating motions, enhancing the overall user experience.

This property plays a critical role in shaping the rhythm and fluidity of animations. For instance, a linear timing function results in a constant speed, while easing functions create a more natural motion by starting slow, speeding up, and then slowing down again. Such control allows designers to match animations with the intended visual storytelling of a webpage. In practical terms, transition-timing-function is a related property that governs the timing for CSS transitions, highlighting how the concept of pacing is essential across both animations and transitions in web design.

Moreover, animation-timing-function can be applied differently depending on the complexity of the animation. Keyframe-based animations can utilize multiple timing functions across different stages, allowing fine-grained control of motion within the same animation sequence. This flexibility enables subtle effects like anticipation, overshoot, and bounce, which are common in modern UI interactions. By carefully selecting or combining timing functions, developers can produce animations that not only convey information efficiently but also evoke emotion and reinforce a brand’s visual language.

Definition

Initial value: ease
Applies to: All elements, :before and :after pseudo elements
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.animationTimingFunction

Interactive Demo

animation-timing-function: linear;

animation-timing-function: ease-out;

animation-timing-function: steps(5, end);

animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);

Syntax

animation-timing-function: <single-timing-function> [ ',' <single-timing-function> ]*

Values

easeThe ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
linearThe linear function is equivalent to cubic-bezier(0, 0, 1, 1).
ease-inThe ease-in function is equivalent to cubic-bezier(0.42, 0, 1, 1).
ease-outThe ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1).
ease-in-outThe ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58, 1)
step-startThe step-start function is equivalent to steps(1, start).
step-endThe step-end function is equivalent to steps(1, end).
steps(<integer>[, [ start | end ] ]?) Specifies a stepping function, described above, taking two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value 'start' or 'end', and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value 'end'.
cubic-bezier(<number>, <number>, <number>, <number>)Specifies a cubic-bezier curve. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid. The y values can exceed this range.

Example

HTML

<div class='container'>

  <h2>animation-timing-function examples</h2>



  <div class='row'>

    <div class='label'>linear</div>

    <div class='track'>

      <div class='ball linear'></div>

    </div>

  </div>



  <div class='row'>

    <div class='label'>ease</div>

    <div class='track'>

      <div class='ball ease'></div>

    </div>

  </div>



  <div class='row'>

    <div class='label'>ease-in</div>

    <div class='track'>

      <div class='ball ease-in'></div>

    </div>

  </div>



  <div class='row'>

    <div class='label'>ease-out</div>

    <div class='track'>

      <div class='ball ease-out'></div>

    </div>

  </div>



  <div class='row'>

    <div class='label'>cubic-bezier</div>

    <div class='track'>

      <div class='ball cubic'></div>

    </div>

  </div>



  <div class='row'>

    <div class='label'>steps(4)</div>

    <div class='track'>

      <div class='ball steps'></div>

    </div>

  </div>

</div>

CSS

/* Layout */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f6f8fa;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.container {
  width: 640px;
  background: #ffffff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

h2 {
  margin: 0 0 18px 0;
  font-size: 18px;
  font-weight: 600;
}

.row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 12px 0;
}

.label {
  width: 120px;
  font-size: 13px;
  color: #374151;
}

.track {
  flex: 1;
  height: 40px;
  background: linear-gradient(90deg, #eef2ff 0%, #f8fafc 100%);
  border-radius: 8px;
  position: relative;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
}

.ball {
  --size: 24px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 4px 10px rgba(2, 6, 23, 0.08);
  background: #6366f1;
  animation-name: slide;
  animation-duration: 1600ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.ball.ease { background: #10b981; }
.ball.ease-in { background: #f59e0b; }
.ball.ease-out { background: #ef4444; }
.ball.cubic { background: #8b5cf6; }
.ball.steps { background: #0ea5e9; }

/* Different timing functions demonstrated */
.ball.linear { animation-timing-function: linear; }
.ball.ease { animation-timing-function: ease; }
.ball.ease-in { animation-timing-function: ease-in; }
.ball.ease-out { animation-timing-function: ease-out; }
.ball.cubic { animation-timing-function: cubic-bezier(.68, -0.55, .27, 1.55); }
.ball.steps { animation-timing-function: steps(4, end); }

@keyframes slide {
  from {
    left: 8px;
  }
  to {
    left: calc(100% - var(--size) - 8px); 
  }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS animation-timing-function property. Hover over a browser icon to see the version that first introduced support for this CSS property.