Master CSS Transitions, Keyframes, and Steps for Dynamic Web Animations

CSS Transitions – Simple Interpolated Animations

CSS transition lets property values change smoothly over a defined duration, triggered by hover, focus, click, or any state change, making UI interactions more lively.

Use case: interactive page elements.

Benefit: adds dynamic feedback without JavaScript.

Keyframes Animation – Complex Multi‑frame Animations

The animation rule defines keyframe steps; its timing-function (e.g., ease, linear, cubic-bezier) inserts interpolated motion between keyframes, producing continuous motion.

Frame‑by‑Frame (Step) Animations

When a jump‑style effect is needed, the steps() timing function disables interpolation. The first argument number sets how many equal intervals the animation is divided into; it does not represent the number of keyframes.

.active.share3 .hand {
    -webkit-animation: wave steps(2,end) 2s forwards infinite;
}
@-webkit-keyframes wave {
    0%   { background-position: 0 0; }
    50%  { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

Changing the number to 1 produces a different stepping pattern (see illustration).

The optional second argument ( start or end) determines whether the step occurs at the beginning or end of each interval. steps(3,start) and steps(3,end) differ as shown in the image below.

Tips: step-start is equivalent to steps(1,start); step-end equals steps(1,end) (default is end).

Practical Applications

Loading spinners.

Sprite animations (character movement) by animating background-position across a sprite sheet.

Tools

Online CSS3 animation frame calculators can help determine the number of frames needed for a desired duration and frame rate.