How to Use animation-timing-function in CSS for Smooth Animations

Use the animation-timing-function property in CSS to control the speed curve of an animation. It defines how the animation progresses over time, such as linear, ease-in, ease-out, or custom cubic-bezier curves.

Syntax

The animation-timing-function property accepts predefined keywords or a custom timing function to control animation speed.

• linear: constant speed
• ease: slow start, fast middle, slow end
• ease-in: slow start
• ease-out: slow end
• ease-in-out: slow start and end
• cubic-bezier(x1, y1, x2, y2): custom curve
• steps(n, start|end): jumps in steps

css

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2) | steps(n, start|end);

Example

This example shows a box moving horizontally with different animation-timing-function values to compare their effects visually.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
}
.box {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.linear {
  animation-timing-function: linear;
}
.ease-in {
  animation-timing-function: ease-in;
}
.ease-out {
  animation-timing-function: ease-out;
}
@keyframes moveRight {
  from { left: 0; }
  to { left: 200px; }
}

Output

Three green boxes side by side move left to right repeatedly. The first moves at a constant speed, the second starts slow and speeds up, the third starts fast and slows down.

Common Pitfalls

One common mistake is forgetting that animation-timing-function affects the speed curve, not the duration or delay. Another is applying it to the wrong element or missing the animation-name property, so the animation doesn't run.

Also, using cubic-bezier without understanding the control points can cause unexpected animation speeds.

css

/* Wrong: no animation-name, so no animation runs */
.box {
  animation-duration: 2s;
  animation-timing-function: ease-in;
}

/* Right: include animation-name */
.box {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in;
}

@keyframes slide {
  from { left: 0; }
  to { left: 100px; }
}

Quick Reference

Value	Description
linear	Animation progresses at a constant speed.
ease	Starts slow, speeds up, then slows down at the end.
ease-in	Starts slowly and then speeds up.
ease-out	Starts quickly and then slows down.
ease-in-out	Slow start and end, faster middle.
cubic-bezier(x1, y1, x2, y2)	Custom speed curve defined by control points.
steps(n, start|end)	Animation jumps in n steps, starting or ending immediately.

Key Takeaways

Use animation-timing-function to control how animation speed changes over time.

Choose from predefined keywords or create custom curves with cubic-bezier.

Always pair animation-timing-function with animation-name for it to work.

Test animations visually to understand how timing functions affect motion.

Avoid confusing timing function with animation duration or delay.