Question 1

What is the difference between CSS animations (@keyframes) and CSS transitions?

Accepted Answer

CSS transitions animate a property change from one state to another triggered by an event (like `:hover`). They require a start and end state only. CSS animations with `@keyframes` run independently — they can loop, play on page load without user interaction, and have multiple intermediate steps. Use transitions for simple hover effects; use animations for complex, autonomous sequences like loaders or attention-grabbing effects.

Question 2

What does animation-fill-mode do and when should I use 'forwards'?

Accepted Answer

`animation-fill-mode` controls the element's style before the animation starts and after it ends. `forwards` keeps the element in the state of the last keyframe after the animation ends. `backwards` applies the first keyframe style during the delay period. `both` combines both behaviors. Use `forwards` when you want the animated element to stay in its final position (e.g., a slide-in element that should remain visible).

Question 3

How do I make a CSS animation loop infinitely?

Accepted Answer

Set `animation-iteration-count: infinite` on the element. You can also use a numeric value like `animation-iteration-count: 3` to repeat exactly 3 times. Combine with `animation-direction: alternate` to make it reverse on each loop (ping-pong effect) instead of jumping back to the start. For a pulse effect, `animation-direction: alternate` with `infinite` looks much smoother than a simple loop.

Question 4

What is the will-change property and does it improve animation performance?

Accepted Answer

`will-change` hints to the browser that an element will change, allowing it to set up GPU compositing layers in advance: `will-change: transform, opacity`. This can dramatically improve animation smoothness on complex pages. However, use it sparingly — applying it to too many elements wastes GPU memory and can actually hurt performance. Add it only when you notice jank, and remove it after the animation completes if possible.

Question 5

What is the prefers-reduced-motion media query and why is it important?

Accepted Answer

`prefers-reduced-motion` detects users who have requested reduced motion in their OS settings (common for people with vestibular disorders or motion sickness). Wrap animations in a media query: `@media (prefers-reduced-motion: reduce) { .animated { animation: none; } }`. This is an accessibility best practice — never skip it for any animation that involves movement, spinning, or flashing. Many modern CSS frameworks include this automatically.

CSS Animation Generator

About this tool

Frequently Asked Questions

Comments & Feedback