Mastering CSS3 Animations: Practical Tips, Timing & Advanced Techniques

1. animation-delay

The animation-delay property defines how long to wait before an animation starts. It accepts positive or negative values; a negative value makes the animation begin as if it were already partway through.

Typical usage is to offset multiple animations, creating a timeline. Example:

.ani--first {
    animation-name: aniFirst;
    animation-duration: 2s;
    animation-delay: 0s;
}
.ani--second {
    animation-name: aniSecond;
    animation-duration: 1s;
    animation-delay: 2s; /* starts 2 s later */
}

When combined, the delays produce a staggered visual sequence (see the accompanying timeline image).

2. animation-fill-mode

The animation-fill-mode property controls how styles are applied before and after an animation runs.

Keep the final state

Setting animation-fill-mode: forwards preserves the styles of the last keyframe after the animation ends.

.ani-area__item--forwards {
    animation: ani 1s ease;
    animation-fill-mode: forwards;
}

Show the initial state before the animation

Using animation-fill-mode: backwards applies the first keyframe’s styles during the delay period, allowing elements to be hidden or positioned off‑screen before the animation starts.

.ani-area__item--backwards {
    animation: ani 1s 1s ease;
    animation-fill-mode: backwards;
}

3. animation-direction

The animation-direction property determines whether an animation plays forward, reverse, or alternates.

Reusing enter/exit animations

Applying animation-direction: reverse to an exit animation lets you reuse the same keyframes in reverse order.

.on .ani--translate {
    animation: aniTranslate 1s ease forwards;
}
.off .ani--translate {
    animation: aniTranslate 1s ease forwards reverse;
}
@keyframes aniTranslate {
    0% { transform: translateY(300px); }
    100% { transform: translateY(0); }
}

4. animation-play-state

The animation-play-state property pauses or runs an animation.

Controlling page‑turn animations

Set the default state to paused and switch to running when the user enters a screen.

.ani {
    animation: ani1 1s ease;
    animation-play-state: paused;
}
.active .ani {
    animation-play-state: running;
}

Hover‑pause carousel

Pause a carousel on hover with a single rule:

.slider:hover .slider__item {
    animation-play-state: paused;
}

5. animation-timing-function

This property defines the pacing of an animation between keyframes. It applies to each keyframe interval, not the whole animation.

Step‑based frame‑by‑frame animation

Using steps() creates sprite‑style frame animations, eliminating the need for GIFs.

For a deeper dive on step functions, see the author’s earlier article on CSS3 frame‑by‑frame animation.

References

Debugging CSS Keyframe Animations – Sarah Drasner

多屏复杂动画CSS技巧三则 – zhangxinxu

打造H5动感影集的爱恨情仇(动画性能篇) – TQ