42 Stunning CSS Animation Examples to Inspire You

Q: What is CSS animation used for?

CSS animation creates movement and visual feedback on websites. Common uses include loading spinners, button hover effects, page transitions, fade-ins, and attention-grabbing elements. It improves user experience without requiring JavaScript code.

Q: How do I create a simple CSS animation?

Define a @keyframes rule with start and end states. Apply it to an element using the animation property. Set duration, timing function, and iteration count. The browser handles all intermediate frames automatically.

Q: Which CSS properties animate smoothly?

Transform and opacity perform best because they run on the GPU. Avoid animating width, height, margin, or padding. These trigger expensive layout recalculations. Stick to translateX, translateY, scale, and rotate for 60fps performance.

Q: How do I make an animation loop forever?

Set animation-iteration-count to infinite. The animation repeats continuously until stopped. Combine with animation-direction: alternate for smooth back-and-forth motion instead of abrupt resets between cycles.

Q: Can I pause and resume CSS animations?

Use animation-play-state property. Set it to paused or running. Toggle via CSS on hover states or through JavaScript classList changes. Useful for carousels, auto-playing banners, and user-controlled motion.

Q: What timing functions work best for animations?

Use ease-out for elements entering the screen. Use ease-in for exits. Linear works for constant rotation like loading spinners. Custom cubic-bezier values create unique acceleration curves for branded motion design.

Summarize this article with:

ChatGPT Claude Perplexity Grok

Static websites feel dead. Users expect movement, feedback, and visual polish.

CSS animation examples give you ready-to-use code for buttons, loaders, hover effects, and page transitions that actually work.

No JavaScript required. No external libraries. Just clean CSS that runs at 60fps.

This guide covers practical animations you can copy directly into your projects: fade-ins, bounces, slides, rotations, and pulse effects.

You’ll learn how @keyframes work, which properties to animate for best performance, and when to use animations versus transitions.

Each example includes the complete code, timing values, and real implementation context.

What is CSS Animation

CSS animation changes element styles over time using keyframes and timing functions.

It creates movement, transitions, and visual effects without JavaScript.

The browser handles all rendering through the compositor layer, making animations smooth and GPU-accelerated.

You define the start state, end state, and everything in between. The browser does the rest.

CSS animation examples

Signature Animation

See the Pen
Signature animation by Damian Drygiel (@drygiel)
on CodePen.

Bits & Bytes | CSS Animation

See the Pen
Bits & Bytes | CSS Animation by Ollie (@Olwiba)
on CodePen.

Animated Submit Button

See the Pen
Submit Button pure css animation by Dead Pixel (@dead_pixel)
on CodePen.

CSS Flame Animation

See the Pen
CSS Flame Animation by Adrian Payne (@dazulu)
on CodePen.

CSS Animation Indoors or outdoors

See the Pen
CSS Animation: Indoors or outdoors? by Olivia Ng (@oliviale)
on CodePen.

Opening Envelope

See the Pen
Animated CSS Mail Button by Jake Giles-Phillips (@jakegilesphillips)
on CodePen.

Store Loading Animation

See the Pen
CSS open store animation by Mariana Beldi (@marianab)
on CodePen.

Pure CSS Animated Bubbles

See the Pen
Pure CSS Animated Bubbles by Mark Bowley (@Mark_Bowley)
on CodePen.

Magnifying glass scrolling loop animation

See the Pen
Magnifying glass scrolling loop animation by Yancy Min (@yancy)
on CodePen.

File Drawers

See the Pen
Pure CSS Drawers ʕノ•ᴥ•ʔノ︵ ┻━┻ by Jhey (@jh3y)
on CodePen.

Stepper 3D Transition Animation

See the Pen
Stepper 3D by Oleg Frolov (@Volorf)
on CodePen.

CSS Animation Material Design

See the Pen
CSS Animation Material Design by Zoë Bijl (@Moiety)
on CodePen.

Pure CSS Moustached Nanny

See the Pen
Pure CSS “Moustached Nanny” by Julia Miocene (@miocene)
on CodePen.

Hot Coffee

See the Pen
Hot Coffee by Zane Wesley (@zanewesley)
on CodePen.

CSS Ghost Loading Animation

See the Pen
ghost by Beep (@scoooooooby)
on CodePen.

Card Swipe Animation

See the Pen
Card Swipe Animation Material Design by Zoë Bijl (@Moiety)
on CodePen.

The Handbook Download Animation

See the Pen
The handbook download animation by Yancy Min (@yancy)
on CodePen.

Color Fan

See the Pen
Color Palette with Pure CSS Animation by Nitish Khagwal (@nitishkmrk)
on CodePen.

Click Button Animation

See the Pen
CSS Particles button by Nikhil Krishnan (@nikhil8krishnan)
on CodePen.

CSS & SVG Waves Animation

See the Pen
CSS & SVG Waves Animation by Ted McDonald (@tedmcdo)
on CodePen.

Windmill (Pug + SCSS) – Responsive + Animated

See the Pen
Windmill (Pug + SCSS) – Responsive + Animated by Ashish Bardhan (@AshBardhan)
on CodePen.

Coffee Machine

See the Pen
Coffee Machine Pure CSS Animation by Henrique Rodrigues (@hjdesigner)
on CodePen.

Flat Design Amusement Park With CSS Animation

See the Pen
Flat design amusement park svg by Lina (animation powered by CSS) by Volodymyr Hashenko (@gxash)
on CodePen.

Animation Example for SocialMediaLink

See the Pen
Animation Example for SocialMediaLink by Dmitriy Dubravin (@Dmitriy_Dubravin)
on CodePen.

Three Dots Loading

See the Pen
CSS Loader with dots by Aliaksei Peterson (@petersonby)
on CodePen.

Tricky CSS Hover Animation

See the Pen
Tricky CSS hover by Piotr Galor (@pgalor)
on CodePen.

Animated Back Glow

See the Pen
Animated Back Glow by George Hastings (@georgehastings)
on CodePen.

H2O – chemical flask (animation)

See the Pen
H2O – chemical flask (animation) by Ekaterina Vasilyeva (@ekaterina_vasilyeva)
on CodePen.

Submarine

See the Pen
Submarine with CSS by Alberto Jerez (@ajerez)
on CodePen.

CSS Reveal Animation

See the Pen
CSS Reveal animation text and image by Anthony Fessy (@antho-fsy)
on CodePen.

CSS Cassette

See the Pen
CSS Cassette by Tony Banik (@banik)
on CodePen.

Whale and the Moon

See the Pen
Whale and the Moon by Aswin Behera (@aswinbehera)
on CodePen.

CSS Keyframe Animation Techniques

Advanced @keyframes patterns for complex motion design.

Transform-Based Animations

Transform properties (rotate, scale, translate, skew) run on the GPU. Best performance.

Rotate

rotate(45deg), rotateX(), rotateY() for 3D. Combine with CSS perspective for depth.

Scale

scale(1.2) enlarges uniformly; scaleX() and scaleY() work independently.

Transform-origin controls the anchor point (center, top left, bottom right).

Translate

translateX(), translateY(), translate3d() for movement. Percentage values relative to element size.

Skew

skewX(10deg) creates italic-like slant. Rarely used but effective for hover effects on buttons.

Color and Opacity Animations

Background-color, color, and opacity transitions create mood shifts.

Background Transitions

Animated backgrounds cycle through colors using multiple keyframe stops.

` @keyframes colorShift { 0% { background-color: #3498db; } 50% { background-color: #9b59b6; } 100% { background-color: #3498db; } } `

Opacity Changes

Opacity animates smoothly and triggers hardware acceleration.

Combine with pointer-events: none when opacity is 0 to prevent invisible click targets.

CSS Animation Performance Optimization

Smooth 60fps animations require understanding what the browser actually does.

Hardware-Accelerated Properties

Only transform and opacity skip layout and paint steps.

These run on the compositor thread, separate from main thread JavaScript.

Animating width, height, margin, padding, top, left forces full page recalculations. Slow.

The will-change Property

Tells the browser to prepare for animation: will-change: transform, opacity;

Apply before animation starts, remove after. Overuse wastes memory.

Composite Layers

Chrome DevTools shows layers in the Rendering tab. Too many layers hurt performance.

Each animated element with transform creates its own layer. Be deliberate.

Animation Timing and Duration Values

Match duration to user expectations and interface context.

Recommended Durations

50-100ms: Button feedback, toggles
150-300ms: Dropdowns, tooltips, small reveals
300-500ms: Page transitions, card hover effects, modals
500ms-1s: Complex sequences, attention-grabbing motion

Easing Recommendations

ease-out for entering elements (fast start, gentle stop).

ease-in for exiting elements (slow start, fast exit).

ease-in-out for elements that stay on screen while animating.

CSS Animation vs CSS Transition

Both animate properties. Different use cases.

When to Use Transitions

Simple A-to-B changes triggered by state (hover, focus, class toggle).

One line of CSS: transition: background-color 0.3s ease;

No keyframes needed. The browser handles intermediate frames.

When to Use Animations

Multiple stages (more than start and end)
Looping or repeating effects
Auto-playing without user trigger
Complex timing with delays and sequences
Animations that run on page load

Performance Comparison

Both perform identically when animating the same properties.

Transitions use less code for simple effects. Animations offer more control.

Browser Support for CSS Animations

CSS animations work in all modern browsers since 2012.

Current Browser Compatibility

Chrome, Firefox, Safari, Edge, Opera all support animations without prefixes.

Check cross-browser compatibility on Can I Use for specific properties like animation-timeline.

Vendor Prefixes

Legacy requirement for Safari before version 9, Chrome before 43.

` @-webkit-keyframes fadeIn { } @keyframes fadeIn { }

.element { -webkit-animation: fadeIn 1s; animation: fadeIn 1s; } `

Autoprefixer handles this automatically in build tools. Manual prefixes rarely needed now.

Fallback Strategies

Elements display their final state if animations fail. Set sensible defaults.

Use @supports to detect animation support and provide alternatives.

Keep animations decorative, not functional. Content should work without them.

FAQ on CSS Animation

What is CSS animation used for?

CSS animation creates movement and visual feedback on websites. Common uses include loading spinners, button hover effects, page transitions, fade-ins, and attention-grabbing elements. It improves user experience without requiring JavaScript code.

How do I create a simple CSS animation?

Define a @keyframes rule with start and end states. Apply it to an element using the animation property. Set duration, timing function, and iteration count. The browser handles all intermediate frames automatically.

What is the difference between CSS animation and transition?

Transitions animate between two states when triggered by hover or class changes. Animations use keyframes for multiple stages, can loop infinitely, and run automatically on page load. Use transitions for simple effects, animations for complex sequences.

Which CSS properties animate smoothly?

Transform and opacity perform best because they run on the GPU. Avoid animating width, height, margin, or padding. These trigger expensive layout recalculations. Stick to translateX, translateY, scale, and rotate for 60fps performance.

How do I make an animation loop forever?

Set animation-iteration-count to infinite. The animation repeats continuously until stopped. Combine with animation-direction: alternate for smooth back-and-forth motion instead of abrupt resets between cycles.

Can I pause and resume CSS animations?

Use animation-play-state property. Set it to paused or running. Toggle via CSS on hover states or through JavaScript classList changes. Useful for carousels, auto-playing banners, and user-controlled motion.

What timing functions work best for animations?

Use ease-out for elements entering the screen. Use ease-in for exits. Linear works for constant rotation like loading spinners. Custom cubic-bezier values create unique acceleration curves for branded motion design.

How do I animate multiple properties at once?

Include all properties in your @keyframes rule. The browser animates them simultaneously. Use the same duration or separate animation declarations with different timings. Transform handles multiple values: transform: translateX(10px) rotate(45deg) scale(1.2).

Do CSS animations work on mobile devices?

Yes. All modern mobile browsers support CSS animations fully. Keep animations subtle on mobile for battery life. Test performance on real devices. Reduce complexity for older phones using media queries.

How do I trigger animation when scrolling?

Use Intersection Observer API with JavaScript to add a class when elements enter the viewport. CSS handles the animation via that class. Pure CSS scroll-driven animations now exist but have limited browser support currently.

Conclusion

These CSS animation examples give you everything needed to add motion to your web projects. Copy the code, adjust the timing values, and ship.

Start with transform and opacity for smooth GPU-accelerated performance.

Match your animation-duration to user expectations: fast for button feedback, slower for text reveals and modal entrances.

Use ease-out for elements entering the viewport. Use ease-in when they leave.

Test on real devices. Chrome DevTools helps, but nothing beats checking a progress bar animation on an actual phone.

Keep animations functional, not decorative. Every bounce, fade, and slide should serve the user interface, not distract from it.

Build your own animation library over time. Reuse what works.