Understanding CSS Timing Functions: cubic-bezier() and steps()

What is a CSS Timing Function

A timing function is a CSS property that controls the acceleration and deceleration of an animation, defining how the animation speeds up or slows down over its duration without changing the overall length.

It applies to both CSS transitions and keyframe‑based animations via the transition-timing-function and animation-timing-function properties.

Unveiling the Basics

The five keyword values— ease (default), ease‑in , ease‑out , ease‑in‑out , and linear —are shorthand for specific cubic‑bezier curves.

Each keyword corresponds to a four‑point Bézier curve that describes the animation’s speed profile.

cubic‑bezier() Function Introduction

The cubic-bezier() function lets you define a custom Bézier curve by specifying the x‑ and y‑coordinates of the two middle control points (point 1 and point 2). Point 0 is always (0,0) and point 3 is always (1,1).

Examples of equivalent cubic‑bezier values for the keywords are provided, showing how the curve shape influences the perceived speed of the animation.

EASE‑IN‑OUT

A symmetric curve (0.42,0) → (0.58,1) starts slowly, accelerates to full speed, then decelerates symmetrically.

EASE

The default ease curve is slightly steeper at the start and smoother at the end.

EASE‑IN and EASE‑OUT

ease‑in starts slowly and speeds up, while ease‑out starts fast and slows down; together they form the ease‑in‑out curve.

LINEAR

linear produces a straight line, meaning constant speed throughout the animation.

Creating Custom Acceleration with cubic‑bezier()

Tools like Lea Verou’s Cubic‑Bezier editor allow you to visually craft custom curves and compare them with the predefined keywords.

Using values outside the 0‑1 range for the control points creates “bounce” effects, where the animation overshoots or reverses direction.

Timing Functions and Keyframe Animations

When applied to keyframe animations, a timing function is evaluated at each keyframe, not over the whole animation, causing each segment to follow the same easing curve.

step() Timing Function Introduction The steps() function divides an animation into a discrete number of steps, useful for frame‑by‑frame sprite animations or typing effects. Syntax: steps(number_of_steps, start|end) , where the optional second argument determines whether the step occurs at the beginning or end of each interval. Creative Uses of steps() Examples include animating a sprite sheet by moving a background image in 16 steps, and creating a typing cursor that flashes using step‑start or step‑end . Browser Support All modern browsers support CSS transitions and animations, with vendor prefixes required for older versions. Support for timing functions, out‑of‑range cubic‑bezier values, and steps() is also broadly available, as shown in the included tables. Summary Timing functions define where acceleration and deceleration occur. They go beyond the five predefined keywords. Custom cubic‑bezier() values can create bounce effects. steps() splits animations into discrete intervals. Browser support is strong and continues to improve. Enjoy experimenting with curves and steps to fine‑tune your CSS animations!