CSS Animations and Keyframes: A Practical Guide

CSS Animations vs. Transitions

CSS offers two animation mechanisms. Transitions animate between two states triggered by a state change (hover, focus, class toggle). Animations using @keyframes can run automatically, loop infinitely, have multiple intermediate states, and provide fine-grained control over timing.

Transitions are ideal for simple hover effects and state changes. Keyframe animations are needed for loading spinners, attention-grabbing effects, complex multi-step sequences, and any animation that runs without user interaction.

The @keyframes Rule

A @keyframes rule defines the stages of an animation by specifying CSS properties at various percentages of completion. The simplest form uses “from” (0%) and “to” (100%) as start and end states. Intermediate percentages (25%, 50%, 75%) define in-between states.

A basic fade-in animation defines opacity 0 at 0% and opacity 1 at 100%. A bounce effect might define position at 0%, 50%, and 100%, with the element moving up at 50% and returning at 100%. A color cycle might define different background colors at 0%, 33%, 66%, and 100%.

Animation Properties

animation-name: References the @keyframes rule name. This connects the element to a specific animation definition.

animation-duration: How long one cycle takes. 0.3s for snappy UI feedback, 1-2s for decorative effects, 3s+ for slow ambient animations.

animation-timing-function: Controls the speed curve. ease (default) starts slow, speeds up, then slows down. linear maintains constant speed. ease-in starts slow. ease-out ends slow. ease-in-out combines both. cubic-bezier() provides custom curves for precise timing control.

animation-delay: Time before the animation starts. Negative values start the animation partway through, useful for staggering multiple elements.

animation-iteration-count: How many times the animation plays. A number for finite repetition, or infinite for continuous looping.

animation-direction: normal plays forward each cycle. reverse plays backward. alternate plays forward then backward. alternate-reverse starts backward then alternates.

animation-fill-mode: Controls the element’s state before and after the animation. forwards keeps the final keyframe state after the animation ends. backwards applies the first keyframe during the delay. both combines both behaviors.

Common Animation Patterns

Loading spinner: A circle element with a colored border segment, animated with rotate from 0deg to 360deg on infinite loop with linear timing. This is the ubiquitous web loading indicator.

Fade and slide in: Combine opacity from 0 to 1 with translateY from 20px to 0. Apply with a slight delay for sequential content reveal. Intersection Observer triggers the animation when elements scroll into view.

Pulse: Scale from 1 to 1.05 and back with ease-in-out timing on infinite alternate loop. Used for attention-grabbing buttons, notifications, and call-to-action elements.

Skeleton loading: A gradient background animated horizontally with translateX, creating the shimmer effect common in content placeholders. This communicates loading state while maintaining layout stability.

Performance Optimization

Animate only transform and opacity for smooth 60fps performance. These properties are handled by the GPU compositor and do not trigger layout recalculation or paint operations.

Avoid animating properties that trigger layout: width, height, padding, margin, top, left, right, bottom. Avoid animating paint-triggering properties: background-color, border-color, box-shadow. If you need these effects, use transform: scale() instead of width/height changes, and opacity fading instead of color transitions where possible.

The will-change property hints the browser to prepare for animation: will-change: transform, opacity. Apply it just before animation starts and remove it afterward to avoid excessive memory usage.

Reduce motion for accessibility. The prefers-reduced-motion media query detects users who have requested minimal animation in their system settings. Wrap animations in this query and provide static alternatives for users who need them.

Use the CSS tools on CalcHub for animation property references, or explore our developer tools for CSS utilities.

Create smooth CSS animations with CalcHub’s developer tools.