The Complete Guide to CSS Animations: From Basics to Advanced

CSS animations bring interfaces to life. A button that subtly responds to a hover. A loading indicator that communicates progress. A page transition that guides attention. When done well, animations make software feel polished, intentional, and responsive. When done poorly, they distract, confuse, and slow things down.

This guide covers CSS animations from first principles to advanced techniques. You will learn how transitions and keyframe animations work under the hood, how to choose the right timing function for every situation, how to write animations that perform at 60 frames per second, and how to build real-world patterns that you can use in production today. Every concept includes working code that you can copy, modify, and deploy.

If you prefer a visual approach, NexTool's CSS Animation Generator lets you design animations interactively and export production-ready code. But understanding the fundamentals makes you a better animator regardless of what tools you use.

CSS Transitions vs. Keyframe Animations

CSS provides two distinct mechanisms for creating animations. Understanding when to use each one is the first step to writing effective motion.

Transitions

A CSS transition animates the change of a property from one value to another. Transitions are triggered by state changes: hover, focus, active, class additions, or media query matches. They are the simplest form of CSS animation and the right choice for the majority of UI interactions.

The transition property takes four values: the property to animate (or all), the duration, the timing function, and an optional delay. When the button is hovered, the background color and scale change smoothly over 200 milliseconds instead of snapping instantly. When the hover ends, the transition plays in reverse.

Use transitions when: you need to animate between two states (hover/focus/active), the animation is simple (one or two property changes), and the trigger is a user interaction or state change.

Keyframe Animations

Keyframe animations are more powerful and more complex. They define multiple steps in an animation sequence using the @keyframes rule, and they can run independently of user interaction. Keyframes support looping, alternating direction, pausing, and precise control over intermediate states.

Use keyframe animations when: you need more than two states, the animation should loop or repeat, you want it to play automatically on load, or you need precise control over intermediate steps.

The Animation Properties: A Complete Reference

The animation shorthand property is actually eight individual properties combined. Understanding each one gives you precise control over every aspect of your animations.

The shorthand syntax combines these properties in order:

Timing Functions: The Secret to Natural Motion

Timing functions are arguably the most important aspect of animation quality. They determine how an animation accelerates and decelerates over time. The difference between an animation that feels mechanical and one that feels natural almost always comes down to the timing function.

Built-in Timing Functions

CSS provides five built-in timing functions. Each produces a different feel.

• linear -- Constant speed from start to finish. Useful for rotation and continuous animations, but feels mechanical for UI transitions because nothing in the physical world moves at constant speed.
• ease -- Starts slow, speeds up, then slows down at the end. The default timing function and a safe choice for most interactions.
• ease-in -- Starts slow, ends fast. Objects feel like they are accelerating. Best for elements leaving the screen.
• ease-out -- Starts fast, ends slow. Objects feel like they are decelerating. Best for elements entering the screen.
• ease-in-out -- Slow at both ends, fast in the middle. Good for elements that need to feel like they are moving naturally from one position to another.

Custom Cubic Bezier Curves

For precise control, use cubic-bezier(x1, y1, x2, y2) to define a custom acceleration curve. The four values represent the two control points of a bezier curve. This is where animations go from good to great.

Real-World Animation Patterns

Theory is useful, but practical patterns are what you actually ship. Here are the most common animation patterns in modern web interfaces, each with production-ready code.

1. Fade and Slide Entrance

The most common entrance animation. Elements fade in while sliding up from a slight offset. This pattern works for cards, list items, sections, and any content that appears on scroll or load.

2. Loading Spinner

Every application needs a loading indicator. This spinner uses a single element with a partially colored border and infinite rotation. It is lightweight, accessible, and works at any size.

3. Pulse / Attention Indicator

A pulsing animation draws attention to important elements like notification badges, live indicators, or call-to-action buttons. The scale and opacity changes create a breathing effect that is noticeable but not distracting.

4. Smooth Slide Transition

Sliding elements across the screen is fundamental for carousels, tab panels, and drawer menus. Using transform: translateX() instead of animating left or margin ensures GPU acceleration and smooth 60fps motion.

5. Skeleton Loading Screen

Skeleton screens are a better loading pattern than spinners for content-heavy pages. They show a placeholder layout that mimics the shape of the actual content, creating the perception of faster loading. The shimmer animation gives a sense of activity.

Performance: Writing Animations That Don't Jank

The number one rule of animation performance: only animate transform and opacity. These two properties are composited by the GPU, which means the browser does not need to recalculate layout or repaint pixels for every frame. Animating any other property (width, height, margin, padding, top, left, background-color, border) triggers layout recalculation or repainting on every frame, which causes jank on lower-end devices.

The will-change Property

For animations that are known in advance (not triggered by unpredictable interactions), the will-change property hints to the browser that an element will be animated, allowing it to optimize ahead of time. Use it sparingly, as overuse actually degrades performance by consuming additional GPU memory.

Accessibility: Respecting User Preferences

Some users experience motion sickness, seizures, or discomfort from animations. The prefers-reduced-motion media query lets you detect whether the user has requested reduced motion in their operating system settings. Always respect this preference.

The pattern above removes animations entirely for users who prefer reduced motion, while preserving the end state of the UI. A less aggressive approach keeps transitions but reduces their duration to near-instant, maintaining the visual consistency of state changes without the motion.

Advanced Techniques

Multi-Step Keyframes

Keyframes are not limited to from and to. You can define as many intermediate states as you need using percentage values. This enables complex sequences like typing animations, multi-stage reveals, and choreographed transitions.

Animating with CSS Custom Properties

In 2026, CSS custom properties (variables) can be animated using @property registration. This unlocks animations that were previously impossible in pure CSS, like gradient transitions and color interpolation along custom paths.

Scroll-Driven Animations

CSS Scroll-Driven Animations (supported in Chrome, Edge, and Firefox in 2026) let you tie animation progress to scroll position without JavaScript. This enables parallax effects, progress indicators, and scroll-linked reveals with zero JS overhead.

Animation Best Practices Checklist

Before shipping any animation, run through this checklist to ensure it is performant, accessible, and purposeful.

1. Purpose: Does this animation serve a function (feedback, orientation, focus direction), or is it purely decorative? Decorative animations should be subtle and optional.
2. Performance: Are you only animating transform and opacity? If not, can you restructure to use these compositable properties?
3. Duration: Is the animation between 150ms and 500ms for interactions? Anything shorter feels instant. Anything longer feels sluggish. Loading animations can be longer.
4. Timing function: Does the easing match the intent? Use ease-out for entrances, ease-in for exits, and ease-in-out for position changes.
5. Reduced motion: Does the animation respect prefers-reduced-motion? Test with this setting enabled in your OS.
6. Mobile: Does the animation perform smoothly on lower-end devices? Test on a real phone, not just a desktop simulator.
7. Repetition: If the animation loops infinitely, is there a mechanism to pause it? Continuous motion is distracting and drains battery on mobile devices.
8. Stacking: If multiple elements animate simultaneously, are delays staggered to create a choreographed feel rather than a chaotic one?