Question 1

What is the difference between a CSS transition and a CSS animation?

Accepted Answer

A CSS transition is a simple, two-point interaction that occurs when a property changes state, such as moving from a default state to a :hover state. It only requires a starting point and an ending point. A CSS animation, utilizing @keyframes, is vastly more complex. It allows for multiple waypoints (e.g., 0%, 25%, 50%, 100%), can loop infinitely, can start automatically without user interaction, and can alter multiple distinct properties on entirely different timelines within the same animation sequence.

Question 2

Why does my animation look choppy on mobile devices?

Accepted Answer

Choppy animations, or "jank," almost always occur because the developer is animating properties that trigger browser reflows or repaints, such as width, height, margin, padding, or box-shadow. Mobile devices have significantly weaker CPUs than desktop computers. To achieve a smooth 60 frames per second on mobile, you must exclusively animate the transform and opacity properties, which are offloaded to the device's GPU, bypassing the CPU bottleneck entirely.

Question 3

How do I make an animation loop infinitely?

Accepted Answer

To create a continuous loop, you must apply the animation-iteration-count property to the target element and set its value to infinite. For example: animation: spin 2s linear infinite;. If you want the animation to loop seamlessly without a harsh jump back to the beginning, ensure that your 0% keyframe and your 100% keyframe contain the exact same visual styling, or use animation-direction: alternate to make the animation play forward and then backward continuously.

Question 4

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

Accepted Answer

@media (prefers-reduced-motion: reduce) is a CSS feature that detects if a user has enabled accessibility settings on their operating system to minimize screen movement. It is critically important because large or rapid animations can cause nausea, dizziness, or vertigo in users with vestibular disorders. Developers must use this query to override complex generated animations, either by replacing them with simple cross-fades or by removing the animation entirely (animation: none;) for these specific users.

Question 5

Can I animate a display: none property to display: block?

Accepted Answer

Historically, no. The display property is not animatable because it represents a binary state; an element is either in the document flow or it is not. You cannot mathematically calculate a halfway point between "none" and "block." To create a fade-in effect, developers traditionally had to use visibility: hidden and animate the opacity property from 0 to 1. However, modern CSS specifications are slowly introducing the @starting-style rule and the allow-discrete transition behavior to solve this exact problem, though browser support for these new features is still evolving.

Question 6

How do I delay an animation from starting immediately?

Accepted Answer

You utilize the animation-delay property. By setting animation-delay: 2s;, the browser will wait exactly 2 seconds after the element loads before beginning the @keyframes sequence. This is heavily utilized in staggered grid animations, where a script or a generator assigns sequentially larger delays to a series of elements (e.g., 100ms, 200ms, 300ms) so they cascade onto the screen one after another rather than appearing simultaneously.

CSS Animation Generator

Command Palette