--- title: "Free CSS Animations: 72 Copy-Paste Effects" description: "72 free, copy-paste CSS animations with live previews: entrances, loaders, hover effects, and menus. Plus 7 interactive CSS lessons. No libraries needed." url: https://frontendhelpers.com/css-animations updated: 2026-10-12 --- # Production-ready CSS animations, free to copy Every preview on this page runs on pure CSS — the exact code you copy. Filter by category, click a card for the full snippet, and paste it straight into your project. Then go deeper: [CSS fundamentals — seven interactive lessons, from colours to positioning ↓](#css-fundamentals) ### [Entrances](https://frontendhelpers.com/css-entrance-animations) - [Fade In](https://frontendhelpers.com/css-entrance-animations#anim-fade-in) - [Fade In Up](https://frontendhelpers.com/css-entrance-animations#anim-fade-in-up) - [Fade In Down](https://frontendhelpers.com/css-entrance-animations#anim-fade-in-down) - [Fade In Left](https://frontendhelpers.com/css-entrance-animations#anim-fade-in-left) - [Fade In Right](https://frontendhelpers.com/css-entrance-animations#anim-fade-in-right) - [Zoom In](https://frontendhelpers.com/css-entrance-animations#anim-zoom-in) - [Bounce In](https://frontendhelpers.com/css-entrance-animations#anim-bounce-in) - [Flip In X](https://frontendhelpers.com/css-entrance-animations#anim-flip-in-x) - [Blur In](https://frontendhelpers.com/css-entrance-animations#anim-blur-in) - [Roll In](https://frontendhelpers.com/css-entrance-animations#anim-roll-in) ### [Attention](https://frontendhelpers.com/css-attention-animations) - [Pulse](https://frontendhelpers.com/css-attention-animations#anim-pulse) - [Heartbeat](https://frontendhelpers.com/css-attention-animations#anim-heartbeat) - [Shake](https://frontendhelpers.com/css-attention-animations#anim-shake) - [Wobble](https://frontendhelpers.com/css-attention-animations#anim-wobble) - [Tada](https://frontendhelpers.com/css-attention-animations#anim-tada) - [Jello](https://frontendhelpers.com/css-attention-animations#anim-jello) - [Swing](https://frontendhelpers.com/css-attention-animations#anim-swing) - [Bounce](https://frontendhelpers.com/css-attention-animations#anim-bounce) ### [Hover Effects](https://frontendhelpers.com/css-hover-effects) - [Lift](https://frontendhelpers.com/css-hover-effects#anim-hover-lift) - [Grow](https://frontendhelpers.com/css-hover-effects#anim-hover-grow) - [Glow](https://frontendhelpers.com/css-hover-effects#anim-hover-glow) - [Shine Sweep](https://frontendhelpers.com/css-hover-effects#anim-hover-shine) - [Border Draw](https://frontendhelpers.com/css-hover-effects#anim-hover-border) - [Underline Slide](https://frontendhelpers.com/css-hover-effects#anim-hover-underline) - [3D Tilt](https://frontendhelpers.com/css-hover-effects#anim-hover-tilt) - [Gradient Shift](https://frontendhelpers.com/css-hover-effects#anim-hover-gradient) ### [Loaders](https://frontendhelpers.com/css-loading-animations) - [Ring Spinner](https://frontendhelpers.com/css-loading-animations#anim-spinner-ring) - [Dual Ring](https://frontendhelpers.com/css-loading-animations#anim-dual-ring) - [Bouncing Dots](https://frontendhelpers.com/css-loading-animations#anim-dots-bounce) - [Pulsing Dots](https://frontendhelpers.com/css-loading-animations#anim-dots-pulse) - [Indeterminate Bar](https://frontendhelpers.com/css-loading-animations#anim-bar-loader) - [Skeleton Shimmer](https://frontendhelpers.com/css-loading-animations#anim-skeleton) - [Ripple](https://frontendhelpers.com/css-loading-animations#anim-ripple-loader) - [Orbit](https://frontendhelpers.com/css-loading-animations#anim-orbit-loader) ### [Text Effects](https://frontendhelpers.com/css-text-animations) - [Typewriter](https://frontendhelpers.com/css-text-animations#anim-typewriter) - [Gradient Flow](https://frontendhelpers.com/css-text-animations#anim-text-gradient) - [Letter Wave](https://frontendhelpers.com/css-text-animations#anim-text-wave) - [Glitch](https://frontendhelpers.com/css-text-animations#anim-text-glitch) - [Neon Flicker](https://frontendhelpers.com/css-text-animations#anim-neon-flicker) - [Tracking In](https://frontendhelpers.com/css-text-animations#anim-tracking-in) - [Focus In](https://frontendhelpers.com/css-text-animations#anim-text-focus) ### [Ambient](https://frontendhelpers.com/css-background-animations) - [Float](https://frontendhelpers.com/css-background-animations#anim-float) - [Gradient Pan](https://frontendhelpers.com/css-background-animations#anim-gradient-pan) - [Aurora Blob](https://frontendhelpers.com/css-background-animations#anim-aurora) - [Pulse Ring](https://frontendhelpers.com/css-background-animations#anim-pulse-ring) - [Slow Spin](https://frontendhelpers.com/css-background-animations#anim-spin-slow) ### [Forms & Inputs](https://frontendhelpers.com/css-form-animations) - [Focus Glow](https://frontendhelpers.com/css-form-animations#anim-input-glow) - [Floating Label](https://frontendhelpers.com/css-form-animations#anim-float-label) - [Toggle Switch](https://frontendhelpers.com/css-form-animations#anim-toggle-switch) - [Checkbox Pop](https://frontendhelpers.com/css-form-animations#anim-checkbox-pop) - [Button Press](https://frontendhelpers.com/css-form-animations#anim-btn-press) - [Validation Shake](https://frontendhelpers.com/css-form-animations#anim-field-error) ### [Accordions](https://frontendhelpers.com/css-accordion-animations) - [Smooth Accordion](https://frontendhelpers.com/css-accordion-animations#anim-accordion-smooth) - [Chevron Rotate](https://frontendhelpers.com/css-accordion-animations#anim-chevron-rotate) - [Content Fade-In](https://frontendhelpers.com/css-accordion-animations#anim-acc-content-fade) - [Plus / Minus Morph](https://frontendhelpers.com/css-accordion-animations#anim-plus-minus) ### [Images & Carousels](https://frontendhelpers.com/css-image-animations) - [Hover Zoom](https://frontendhelpers.com/css-image-animations#anim-img-zoom) - [Ken Burns](https://frontendhelpers.com/css-image-animations#anim-ken-burns) - [Grey → Colour](https://frontendhelpers.com/css-image-animations#anim-desaturate) - [Caption Slide-Up](https://frontendhelpers.com/css-image-animations#anim-caption-slide) - [CSS Carousel](https://frontendhelpers.com/css-image-animations#anim-css-carousel) - [Blur-Up Reveal](https://frontendhelpers.com/css-image-animations#anim-blur-load) ### [Menus & Dropdowns](https://frontendhelpers.com/css-menu-animations) - [Dropdown Fade](https://frontendhelpers.com/css-menu-animations#anim-dropdown-fade) - [Dropdown Grow](https://frontendhelpers.com/css-menu-animations#anim-dropdown-scale) - [Staggered Items](https://frontendhelpers.com/css-menu-animations#anim-menu-stagger) - [Hamburger Morph](https://frontendhelpers.com/css-menu-animations#anim-burger-morph) ### [UI Feedback](https://frontendhelpers.com/css-ui-feedback-animations) - [Toast Slide-In](https://frontendhelpers.com/css-ui-feedback-animations#anim-toast-slide) - [Modal Pop-In](https://frontendhelpers.com/css-ui-feedback-animations#anim-modal-pop) - [Tooltip Fade](https://frontendhelpers.com/css-ui-feedback-animations#anim-tooltip-fade) - [Tab Underline Slide](https://frontendhelpers.com/css-ui-feedback-animations#anim-tab-underline) - [Progress Bar Fill](https://frontendhelpers.com/css-ui-feedback-animations#anim-progress-fill) - [Notification Ping](https://frontendhelpers.com/css-ui-feedback-animations#anim-badge-ping) ## Browse by category Each category has its own page with the full set, plus guidance on when to use those effects and how to keep them accessible. [Entrance animations 10](https://frontendhelpers.com/css-entrance-animations) [Attention animations 8](https://frontendhelpers.com/css-attention-animations) [Hover effects 8](https://frontendhelpers.com/css-hover-effects) [Loading animations 8](https://frontendhelpers.com/css-loading-animations) [Text animations 7](https://frontendhelpers.com/css-text-animations) [Background animations 5](https://frontendhelpers.com/css-background-animations) [Form animations 6](https://frontendhelpers.com/css-form-animations) [Accordion animations 4](https://frontendhelpers.com/css-accordion-animations) [Image animations 6](https://frontendhelpers.com/css-image-animations) [Menu animations 4](https://frontendhelpers.com/css-menu-animations) [UI feedback animations 6](https://frontendhelpers.com/css-ui-feedback-animations) ## In-depth recipes The most-requested effects, explained end to end: live demos, variations, performance and accessibility. - [Cubic-Bezier Easing Generator](https://frontendhelpers.com/cubic-bezier-generator): Fine-tune the timing of any animation above: drag the curve, preview it and copy the CSS. - [CSS Typewriter Effect: Pure CSS Typing Animation](https://frontendhelpers.com/css-typewriter-effect): Build a pure CSS typewriter effect with steps() and ch: blinking caret, type-and-delete loop, multiple lines, monospace caveats and reduced motion. - [Skeleton Loading Screens in CSS: Shimmer Done Right](https://frontendhelpers.com/css-skeleton-loader): Build CSS skeleton screens that match your layout, shimmer on the compositor, respect reduced motion and announce loading to screen readers. - [Animated Gradient Borders in CSS: 3 Techniques](https://frontendhelpers.com/css-animated-gradient-border): Three ways to build a gradient border in CSS, with live demos: border-image, clipped backgrounds and a conic pseudo-element, animated with @property. - [CSS Shake Animation for Errors (Accessible Version)](https://frontendhelpers.com/css-shake-animation): A CSS shake animation for form errors: decaying translateX keyframes, a clean restart with element.animate(), plus ARIA and reduced-motion support. - [CSS Loading Spinners: Light, Smooth and Accessible](https://frontendhelpers.com/css-loading-spinner): Build CSS loading spinners from one element, a conic gradient or three dots. Size them in em, delay them 300ms and make them accessible in buttons. - [Animated Gradient Text in CSS (and Keeping It Readable)](https://frontendhelpers.com/css-animated-gradient-text): Animate gradient text with background-clip and @property, then keep it readable: contrast at every stop, forced colours, selection and reduced motion. - [CSS Marquee: An Infinite Scrolling Ticker Done Right](https://frontendhelpers.com/css-marquee-animation): A seamless CSS marquee: two copies and translateX(-50%), masked edge fades, speed in px/s, a real Pause button for WCAG 2.2.2, and reduced-motion support. - [Fade In on Scroll with CSS Scroll-Driven Animations](https://frontendhelpers.com/css-fade-in-on-scroll): Reveal content on scroll with animation-timeline: view(), add an IntersectionObserver fallback, and never hide content that only JavaScript can show. - [CSS Hover Underline Animations That Work With Wrapping](https://frontendhelpers.com/css-hover-underline-animation): Animate link underlines with ::after and scaleX, a background-size gradient that survives line wraps, or text-decoration transitions, accessibly. - [CSS Flip Card: 3D Card Flip on Hover, Focus and Click](https://frontendhelpers.com/css-flip-card): Build a CSS flip card with perspective, preserve-3d and backface-visibility. Stack faces with grid, flip on focus or a button, respect reduced motion. - [Animate Accordion Height in CSS: interpolate-size & More](https://frontendhelpers.com/css-accordion-animation): Animate accordion height to auto: the grid-rows trick that works everywhere, interpolate-size, ::details-content and exclusive details groups. - [Animate a Native Dialog in CSS with @starting-style](https://frontendhelpers.com/css-dialog-animation): Animate a native dialog in and out with @starting-style and allow-discrete, fade its backdrop, close it on a backdrop click and respect reduced motion. ## CSS fundamentals every frontend developer should master Animations are the fun part — these seven foundations are what make everything else work. Each one below is interactive: drag, toggle, scroll and resize to see the concept behave, then copy the pattern. 01 · Colours ### HSL: colours you can actually reason about Hex codes like `#8b5cf6` are fine for copying, but impossible to tweak by eye. HSL describes colour the way designers think: **hue** (position on the colour wheel), **saturation** (intensity) and **lightness**. Need a hover shade? Drop lightness by 8. Need a matching accent? Shift the hue, keep the rest. Drag the sliders — all three formats describe the identical colour. In real projects, name your colours once as **custom properties** (design tokens) and reference them everywhere — change the token, and the whole site follows. That is exactly how this site is themed. :root { --brand: hsl(258, 90%, 66%); --brand-dark: hsl(258, 90%, 56%); /\* hover: -10 lightness \*/ --brand-soft: hsl(258 90% 66% / 0.15); /\* translucent tint \*/ } .button { background: var(--brand); } .button:hover { background: var(--brand-dark); } .badge { background: var(--brand-soft); color: var(--brand); } 02 · Styling & the cascade ### Specificity: why your style “doesn’t apply” When two rules target the same element, CSS doesn’t pick the one you wrote last — it picks the most **specific** selector. Specificity is scored in three columns: **(IDs, classes, elements)**, compared left to right. This is the single most common reason a style “mysteriously” fails to apply. The professional habit: keep selectors flat — **one class per rule** — so specificity stays low and predictable, and you never need `!important` to win a fight you accidentally started. /\* Both rules target the same link… \*/ #sidebar .link { color: red; } /\* (1,1,0) — wins \*/ .nav .menu .item .link { color: blue; } /\* (0,4,0) — loses, despite 4 classes \*/ /\* ✅ The maintainable style: flat, single-class selectors \*/ .nav-link { color: blue; } .nav-link.is-active { color: red; } 03 · Z-index & stacking ### Why z-index: 9999 still loses Z-index isn’t a global ranking — it only competes **inside the same stacking context**. A parent with a `z-index`, `transform`, `filter`, `opacity` below 1, or `position: sticky` creates a new context, and its children can _never_ escape it — not even with `z-index: 9999`. Toggle the checkbox and watch the badge lose to a humble `z-index: 1`: The fix is never a bigger number on the child — it’s raising the **parent’s** z-index, or removing whatever created the unwanted context. (The tooltips in this site’s sidebar hit exactly this trap during development.) /\* THE TRAP \*/ .panel-a { position: relative; z-index: 0; } /\* new context \*/ .panel-a .badge { position: absolute; z-index: 9999; } /\* trapped \*/ .panel-b { position: relative; z-index: 1; } /\* paints on top \*/ /\* THE FIX — promote the PARENT, not the child \*/ .panel-a { position: relative; z-index: 2; } 04 · Responsive design ### Layouts that adapt without breakpoints Modern responsive design is less about stacking media queries and more about letting CSS do the maths. `repeat(auto-fit, minmax())` adds and removes grid columns to fit whatever space exists, and `clamp()` scales type fluidly between a floor and a ceiling. **Drag the handle** at the bottom-right corner of the box: Media queries still matter — write them **mobile-first** (base styles for small screens, then `min-width` enhancements upward). The animation gallery above uses exactly this auto-fit pattern, which is why it gains columns on a 2K monitor without a single extra breakpoint. /\* Columns appear and disappear to fit the space \*/ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } /\* Type scales smoothly: never below 1.8rem, never above 3rem \*/ h1 { font-size: clamp(1.8rem, 4.5vw, 3rem); } /\* Mobile-first: base = small screens, enhance upward \*/ @media (min-width: 768px) { /\* tablets and up \*/ } @media (min-width: 1600px) { /\* large monitors \*/ } 05 · Themed Scrollbars ### Custom scrollbars: the detail that completes a theme A dark, carefully-themed site with a default light-grey scrollbar is a suit with trainers — the browser default breaks the illusion on the most-used control on the page. Two systems exist for styling them, and the trick is knowing how they interact. **Every scrollbar on this site** — the page itself, code blocks, this demo box — uses exactly the CSS below. /\* Chrome, Edge, Safari — full custom look \*/ ::-webkit-scrollbar { width: 11px; /\* vertical bar \*/ height: 11px; /\* horizontal bar \*/ } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); border-radius: 8px; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #8b5cf6, #06b6d4); border-radius: 8px; border: 2px solid #060913; /\* match your page bg — \*/ background-clip: padding-box; /\* creates a slim gap \*/ } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #9d74f8, #2fc9e8); border: 2px solid #060913; background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /\* Firefox (and anything without webkit scrollbars). Scoped with @supports so it can't override the fancy version in Chrome 121+, which supports BOTH systems and prefers this one when set. \*/ @supports not selector(::-webkit-scrollbar) { \* { scrollbar-width: thin; scrollbar-color: #8b5cf6 rgba(255, 255, 255, 0.05); } } Bare `::-webkit-scrollbar` selectors apply to the page _and every scrollable element_ at once. To style just one container, prefix them: `.code-box::-webkit-scrollbar-thumb { … }`. 06 · Theme Tokens ### Design tokens: theme switching in one attribute Hard-coded colours are why dark mode retrofits take weeks. The professional pattern: name every colour **once** as a custom property on `:root`, reference only the tokens everywhere else, and switching themes becomes swapping one `data-theme` attribute. This entire site is built on tokens — try it live: /\* 1. Name the colours ONCE — the tokens \*/ :root { --bg: #0b1224; --surface: #141c30; --text: #e2e8f0; --accent: #06b6d4; } /\* 2. Each theme just re-assigns the same tokens \*/ \[data-theme="light"\] { --bg: #f1f5f9; --surface: #ffffff; --text: #1e293b; --accent: #7c3aed; } /\* 3. Components only ever reference tokens \*/ body { background: var(--bg); color: var(--text); } .card { background: var(--surface); } .button { background: var(--accent); } /\* JS: 3 lines to switch and remember the choice \*/ // document.documentElement.dataset.theme = 'light'; // localStorage.setItem('theme', 'light'); // on load: dataset.theme = localStorage.getItem('theme') || ''; Respect the visitor's OS preference as the default with `@media (prefers-color-scheme: light)`, and let the toggle override it. Pair with `color-scheme` (see lesson 05) so native controls follow your theme too. 07 · Positioning ### Relative vs absolute: who positions whom The rule that unlocks all of CSS positioning: **`absolute` positions an element against its nearest _positioned_ ancestor** — and `position: relative` on the parent is how you volunteer it for that job. Relative also lets an element nudge from its own spot _while keeping its space in the flow_; absolute removes it from the flow entirely. Watch the siblings: `sticky` is the hybrid: it scrolls normally until it reaches your offset, then pins — the header on this site and the bar in this box both use it: /\* The pattern behind 90% of overlays, badges and tooltips \*/ .parent { position: relative; /\* becomes the anchor — moves nothing \*/ } .badge { position: absolute; /\* leaves the flow entirely \*/ top: -8px; right: -8px; /\* measured from .parent's corner \*/ } /\* relative: nudge visually, keep your reserved space \*/ .nudge { position: relative; top: 4px; left: 8px; } /\* fixed: pinned to the viewport, ignores scrolling \*/ .cookie-banner { position: fixed; bottom: 20px; left: 20px; } /\* sticky: in-flow until it hits the offset, then pins \*/ .table-header { position: sticky; top: 0; } ## How to use these animations 1. **Copy the CSS.** Click any card’s _Copy CSS_ button — the snippet contains the class and its keyframes, fully self-contained. 2. **Paste it into your stylesheet.** All classes are prefixed `fh-`, so they won’t collide with your existing styles. Rename them freely. 3. **Add the class to your element.** The card’s _Code_ view shows a ready-made HTML usage example for every effect. Respect users who prefer less motion. Add this once, globally, and every animation on your site will settle instantly for people who have reduced motion enabled in their OS settings: ## Why these animations are fast: transform and opacity Almost every effect in this library animates only two properties: `transform` and `opacity`. Browsers can hand these off to the GPU compositor, which means the animation runs on its own thread at 60fps even while JavaScript is busy. Animating layout properties like `width`, `height`, `top` or `margin` forces the browser to recalculate layout on every frame — the main cause of janky, stuttering motion on mid-range phones. That is also why a pure-CSS approach beats pulling in a JavaScript animation library for simple UI motion: zero bundle weight, no main-thread work, and the browser can optimise the whole animation ahead of time. Save JavaScript animation for things CSS genuinely cannot express, such as physics, gestures, or interruptible timelines. ## When (and when not) to animate Good UI motion answers a question the user already has: _where did this come from, what changed, what can I do next?_ Entrance animations orient the eye when content appears; hover effects confirm that an element is interactive; loaders reassure users that work is happening. Used this way, motion measurably improves perceived performance and task confidence. The failure mode is decoration: animating everything, everywhere, on every scroll. Keep durations between 150ms and 600ms for interface feedback, reserve longer, looping effects for ambient backgrounds, and never gate a user’s next action behind an animation they must wait for. One well-placed effect reads as polish; ten read as noise. ## Frequently asked questions ### Can I use these CSS animations in commercial projects? Yes — every animation in the library is free for personal and commercial use, with no attribution required. Copy the CSS, rename the classes if you like, and ship it. ### Do these animations need JavaScript? No. Every effect is pure CSS — including the accordion, carousel, dropdown menus and hamburger toggle, which use native elements and modern selectors instead of scripts. JavaScript is only ever suggested for _triggering_ (adding a class on scroll or on error). ### Will CSS animations slow my website down? Not when they animate the right properties. Almost every effect here animates only `transform`, `opacity` or `filter`, which browsers composite on the GPU off the main thread — zero bundle weight and no jank, unlike JavaScript animation libraries. ### Do the animations respect reduced-motion settings? The page previews pause automatically when your OS prefers reduced motion, and the [how-to guide](#guide-howto) ships a copyable `prefers-reduced-motion` safety net you can add once to your own site.