Guides · · Maxwell Prehoda
12 CSS Animation Examples From the People Who Push CSS Furthest (With Live Demos)
CSS alone can now do things that needed JavaScript a few years ago: count numbers, animate gradients, tie motion to scroll, fold a 3D box on a click. The examples below show the range, organised by what they teach: single-element loaders, registered custom properties, 3D transforms, clip-path transitions, design-token keyframes, generative grids, scroll-driven effects, hover effects and one-element art.
Most entries are the work of people who push CSS furthest in public, credited and linked, with what makes each one worth studying and a live demo from our directory of the same technique, so you can read the code in a minute. Three entries are ours. If you want the keyframe syntax itself explained pattern by pattern, our CSS keyframes examples guide covers that.
1. CSS Loaders by Temani Afif: Best for learning what one element and a keyframe can do
Platform: Pure CSS, single HTML element each, click to copy
Temani Afif's collection has more than 600 loaders, each built from a single HTML element in CSS only. Click one and you copy its CSS. It is the best demonstration on the web of how much you can draw with gradients, masks and pseudo-elements before you ever add a second div.
Study a few and you will see the same moves repeat: conic and radial gradients for shapes, background-position or mask animation for motion, steps() for frame-by-frame effects. Those are the building blocks of nearly every CSS animation on this list.
Our Dual Ring Spinner below is a pure-CSS loader in the same single-element spirit: two opposing arcs spin around an invisible track.
Watch out for: Single-element tricks can be hard to read later. Comment the gradient stops, or your team will treat the CSS as untouchable.
2. Jhey Tompkins: Exploring @property and its Animating Powers: Best for counters, timers and colour cycles without JavaScript
Platform: Pure CSS with @property, CSS-Tricks article (2021)
Jhey Tompkins' March 2021 article is the clearest tour of why @property changed CSS animation. Registering a custom property gives it a type, so the browser can interpolate it: a hue that used to jump between keyframes now glides, and a number can count. His demos include a CSS-only counter and stopwatch, rainbow hue bands, animated beach-wave gradients, a gradient-border charging indicator, a ball thrown in an arc and a car driving round a rounded square.
The bigger idea is one typed property driving many effects on a single timeline, which is how modern CSS animations stay short.
Our Circular Progress with Percentage below uses the same trick: a registered custom property fills the ring and counts the number to 100% in pure CSS.
Watch out for: Counting with CSS works by displaying the property through a counter; screen readers do not hear the animated number, so expose the real value in text as well.
3. Jhey Tompkins: Pure CSS 3D Package Toggle: Best for interactive 3D components with no script
Platform: Pure CSS: checkbox, 3D transforms, custom properties
A cardboard box that folds flat and unfolds when you tap it, with S, M, L and XL sizes. Jhey builds it with the checkbox hack for state, CSS 3D transforms to fold each side, and custom properties to stagger the transitions so the flaps move in sequence.
It is the best argument that CSS can handle real interactive animation: state, sequencing and 3D in one component, with the accessibility of a real form control underneath. His CSS-Tricks archive has more in this vein, including a 3D DigitalOcean logo and a guide to thinking in cubes.
Our 3D Toggle Switch below is a pure-CSS take on a chunky 3D control: the track is a slab with a front edge and the knob a raised block.
Watch out for: 3D CSS needs a perspective on the parent and preserve-3d on the children. Forget either and everything collapses to flat shapes that seem to slide for no reason.
4. transition.css by Adam Argyle: Best for drop-in clip-path reveals and wipes
Platform: Pure CSS, Apache-2.0, 46 transitions
Adam Argyle's transition.css packages 46 pre-built transitions built on clip-path. You import the stylesheet and set one attribute, such as `transition-style="in:wipe:up"`, and the element wipes into view.
Clip-path transitions are worth learning because they reveal without moving the content, so text stays still and readable while the shape around it changes.
Our Wipe Reveal below is a pure-CSS clip-path reveal in the same family, applied to a headline.
Watch out for: Clip-path animates on the main thread in some browsers. It is fine for one hero element; animating dozens of clipped cards at once can stutter.
5. Open Props animations: Best for consistent keyframes and easings across a design system
Platform: CSS custom properties, MIT, by Adam Argyle
Open Props ships animations as design tokens: premade keyframes for fades, slides in four directions, shakes on three axes, and attention or loading states such as spin, ping, blink, float, bounce and pulse. Alongside them sit easing tokens, ease-1 to ease-5 plus elastic, spring, bounce, step and the Robert Penner curves.
Tokens solve the most common problem in CSS animation at scale, which is ten slightly different fade-ins across one product. It also provides `--motionOK` and `--motionNotOK` custom media queries so you can gate motion on user preference.
Our Shake X keyframe below is the error shake many systems standardise on: the box jolts side to side in shrinking swings and settles in under a second.
Watch out for: Custom media queries like --motionOK need a build step (PostCSS) in most browsers today. Check your setup, or use the plain prefers-reduced-motion media query.
6. css-doodle by yuanchuan: Best for generative patterns and creative coding in CSS
Platform: Web component, MIT since 2017
css-doodle turns CSS into a generative art tool. Inside a css-doodle element you write CSS-like rules: `@grid` sets up a grid of cells, and functions such as `@random` and `@p` give each cell different values, so one short rule produces hundreds of varied, animated tiles. It also has helpers for shapes, plots, SVG and patterns.
It is where to go when you want an animated pattern that would take pages of hand-written nth-child rules, which makes it a quick way to explore ideas for backgrounds and loaders.
Our Rotating Plus Pattern below is a hand-written pure-CSS pattern in the same spirit: a tidy grid of plus signs where every sign turns a quarter at once.
Watch out for: It is a web component rendered with JavaScript, so it is not pure CSS at runtime. For a production background, export the result or recreate it with a few gradients.
7. CSS Tip by Temani Afif: Best for keeping up with new CSS animation features
Platform: Daily CSS tips, free
Temani Afif's second site publishes one modern CSS trick at a time, and many of them are animation. Recent tips include hover proximity built with scroll-driven animations, a responsive grid layout with animation, and a children-count() technique that also leans on scroll-driven animations.
Short, single-technique demos are the fastest way to learn new features such as animation-timeline, because you see the property doing one job.
Our Fade In On Scroll below is a pure-CSS scroll-driven entrance: animation-timeline: view() ties the keyframes to scroll, and it plays once on load where the API is missing.
Watch out for: Many tips use features that are new in at least one browser. Check support before you ship, and wrap scroll-driven rules in @supports.
8. Hover.css by Ian Lunn: Best for a catalogue of classic hover transitions
Platform: CSS, Sass and LESS
Hover.css has been the reference collection of CSS3 hover effects for links, buttons, logos and images for over a decade, with more than 29,000 GitHub stars: 2D transitions, background transitions, icon, border, shadow and glow transitions, speech bubbles and curls, each applied as a class.
Even if you never install it, it is a vocabulary. Most hover effects you see on the web have a name in its demo page, which makes it easy to describe what you want.
Our Border Draw Button below is a pure-CSS hover in the same tradition: two pseudo-elements draw the border around the button on hover.
Watch out for: Hover.css has an open-source licence and a separate commercial licence. Read which one applies before you use it in a commercial product.
9. A Single Div by Lynn Fisher: Best for learning to build shapes you will later animate
Platform: CSS drawings, one HTML element each (since 2014)
Lynn Fisher's project is a gallery of CSS drawings made with only one HTML element, started in 2014. Every illustration is a single div plus its pseudo-elements, layered with gradients and shadows.
It belongs on an animation list because shape-building is half of CSS animation. Once you can draw a coffee cup or a camera from gradients, animating it is a matter of changing a few of those layers over time, which is exactly how most pure-CSS loaders and icons work.
Watch out for: One-element drawings trade readability for cleverness. In production, use extra elements when they make the animation easier to maintain.
10. Our Hairline Animations: Best for isometric line-art illustrations that move
Platform: Motions directory, free Ours
Our Hairline Animations directory is a style you will not find in most CSS collections: isometric hairline line art that animates, such as servers sliding out of racks, drones lifting off and keyboards typing. Each is HTML and CSS with a prefers-reduced-motion guard.
The Laptop Lid below shows the approach: an isometric hairline laptop whose lid swings open on a spring, then the screen lights up.
Watch out for: Thin lines shimmer when they move at small sizes. Keep hairline illustrations large enough that strokes land on whole pixels.
11. Our Rotating Gradient Border: Best for the animated border on cards, inputs and buttons
Platform: Motions directory, free Ours
The animated gradient border is one of the most requested CSS effects. Our Rotating Gradient Border is the classic version: a multi-colour conic gradient turns around a rounded box.
The Border Animations directory has the variants, from see-through middles to beams and glows, and our border animation examples show how real sites use them.
Watch out for: A spinning border on every card is noise. Use it to mark one thing: the featured plan, the focused input, the AI action.
12. Our CSS animation index: Best for browsing about 1,800 copy-paste CSS animations
Platform: Motions directory, free Ours
Our CSS index gathers every pure-CSS snippet in the directory: loaders, hovers, text, buttons, toggles, backgrounds, borders, keyframes and more, about 1,800 in all. Every one is HTML and CSS with no JavaScript, two custom properties for colour and size, and a prefers-reduced-motion guard.
The Staggered List Entrance below is a good one to read first: each row carries its index in a --i custom property and the delay is calc(var(--i) * 90ms), so adding rows needs no new CSS.
Watch out for: Copy-paste animations still need tuning. Match durations and easing to the rest of your product before you ship them side by side.
How to choose a CSS animation technique
The examples above use a handful of techniques. Pick by what you need to move.
Match it to what moves
Position, scale and rotation: transform with a transition or keyframe, as in the 3D package toggle. Colour, angle or a number: a registered @property, as in Jhey's demos. Shape or reveal: clip-path or mask, as in transition.css. Drawn shapes: gradients and pseudo-elements, as in CSS Loaders and A Single Div. Scroll position: animation-timeline, as in CSS Tip's demos and our scroll animation examples.
Match it to performance
transform and opacity run on the compositor and stay smooth. clip-path, filters and @property colour tweens repaint every frame, so keep them to a few elements. Width, height, top and left trigger layout, so avoid animating them. Our CSS animation best practices guide goes deeper, and if you are weighing CSS against a library, see CSS vs GSAP.
Match it to your system
A design system wants tokens, like Open Props' keyframes and easings, so every fade is the same fade. A one-off hero can be bespoke. Either way, every animation needs a prefers-reduced-motion rule; every snippet in our directory ships with one. For whole libraries rather than single examples, see our roundup of the best CSS animation libraries.
Write your next CSS animation from a real example
Pick the example closest to what you need, open its code, and change one thing at a time: the duration, then the easing, then the property. You will understand it faster than by starting from a blank file.
If you would rather describe it, the creator writes CSS keyframes from a sentence or from your own component, with reduced motion handled, and you can refine it in chat.
Make a pure CSS animation for a pricing card's "Most popular" badge. The badge drops in from 8px above with a slight overshoot over 450ms on page load, then a soft shine sweeps across it every 4s. Use only transform, opacity and background-position, and one custom property for the accent colour. Under prefers-reduced-motion, show the badge in place with no drop and no shine.
Common questions
What are some cool CSS animation examples?
Single-element loaders like Temani Afif's CSS Loaders, Jhey Tompkins' pure CSS 3D package toggle and @property counters, Adam Argyle's clip-path transitions, generative patterns made with css-doodle, and scroll-driven effects built with animation-timeline. Every entry above links to a live example.
How do I make a CSS animation?
Define the motion with an @keyframes rule (for example from opacity 0 and translateY(10px) to the resting state), then apply it with the animation property, setting duration, easing, delay and iteration count. For simple state changes like hover, a transition is enough. Add a prefers-reduced-motion rule to tone it down for people who ask for less motion.
Can CSS animations replace JavaScript animation?
For most UI motion, yes: hovers, entrances, loaders, toggles, gradient and number animations, and scroll-linked effects in supporting browsers. JavaScript is still needed for physics and gestures, complex sequencing that reacts to data, and canvas or WebGL scenes.
Are CSS animations bad for performance?
Not if you animate transform and opacity, which the browser can run on the compositor. Animating layout properties like width or top, large blurs, or many clip-paths at once costs more. Test on a mid-range phone with DevTools' performance panel.
Where can I find free CSS animations to copy?
CSS Loaders by Temani Afif, Hover.css, transition.css and Open Props are popular sources, and our CSS index has about 1,800 copy-paste snippets with reduced-motion guards built in.