What is CSS Animation?

CSS animation lets HTML elements change visual properties over time without writing JavaScript. It can cover anything from a subtle button transition to a page entrance effect handled directly by the browser.

CSS offers two common motion patterns. transition interpolates between two values when a state changes, such as a button color changing on hover. @keyframes defines multiple stages of motion and supports duration, delay, iteration count, and timing controls for more complex effects.

Performance and Accessibility

Animating transform and opacity is usually more efficient because the browser can handle them without recalculating layout. Continuously changing width, height, top, or left can cause jank, especially on mobile devices.

Motion should have a clear purpose: showing feedback, explaining focus changes, or communicating loading state. Long, fast, or looping animation can distract users. The prefers-reduced-motion media query lets a site offer a calmer version for users who are sensitive to motion.

Business Use

CSS animations are common in micro-interactions, product tours, menu openings, and form validation feedback. Well-designed motion supports UX; decorative movement that does not help the task can slow the page and reduce readability.

In a website redesign, animation decisions should be made alongside the performance budget, not only the visual style.