Skip to Content

How to Use CSS linear() Easing for Precise Animations

24 February 2026 by
Suraj Barman

CSS easing determines how an element changes speed during an animation, giving motion a sense of purpose. The new linear() function adds fine‑grained control, letting designers shape timing without writing complex curves.

Understanding CSS Easing Keywords

Easing keywords are built‑in shortcuts that map to common speed patterns. They are useful for quick UI tweaks but may not fit every motion need.

  • linear – constant speed throughout the animation.
  • ease – default curve with mild acceleration and deceleration.
  • ease‑in – starts slow, then speeds up.
  • ease‑out – starts fast, then slows down.
  • ease‑in‑out – combines a slow start and slow end.

Using the linear() Function

The linear() function accepts a list of numeric values that define a piecewise linear curve. It offers more flexibility than the linear keyword while staying easy to read.

  • Syntax: animation-timing-function: linear(a0, a1, ... an)
  • Each a value represents a percentage of the animation duration.
  • Values must be in ascending order from 0% to 100%.
  • Useful for creating sections with distinct speeds, e.g., fast start then slow finish.
  • Works with any animation‑timing‑function property.

When to Choose Linear Over Custom Curves

Linear segments are ideal when you need predictable speed changes without calculating Bézier control points. They are especially handy for UI components like scrolling carousels or progress bars.

  • Clear visual separation between speed zones.
  • Easier to maintain than complex cubic‑Bézier definitions.
  • Consistent behavior across browsers.
  • Minimal performance impact.
  • Can be combined with steps() for stepped motion.

Tools for Crafting and Testing Easing

Even with simple linear segments, visual feedback helps fine‑tune the motion. Several online utilities let you preview and export timing functions.