25+ CSS Scroll/Reveal/Loading/Typing Animations for the Web

Authoraidenleads

Last UpdateOctober 23, 2026

LicenseMIT

Features

7 entrance effects, including directional slides, zoom, and flip.
Scroll reveals that play once or repeat when an element re-enters the viewport.
Staggered animations for a container’s direct children.
5 hover effects with keyboard-focus states.
4 CSS loading indicators: spinner, dots, progress bar, and skeleton.
Pulse, ping, shake, bounce, and wiggle attention effects.
Typewriter text and an animated gradient text effect.
Reduced-motion rules for decorative effects and active loaders.

How To Use It

Installation

Download the package and copy css/animations.css into your website. You can also clone the project from GitHub:

git clone https://github.com/aidenleads/css-animation-snippets.git

Basic Usage

Load css/animations.css in the page’s <head> section. Apply the animation classes to your HTML elements within the <body>.

<!-- In <head> -->
<link rel="stylesheet" href="css/animations.css">
<!-- In <body> -->
<h2 class="anim-slide-up">New arrivals</h2>
<a href="/collection" class="anim-underline">Explore the collection</a>

Scroll-Triggered Animations

Scroll reveals require js/scroll-reveal.js in addition to the stylesheet. Load the script synchronously after the CSS link, with no defer or async attribute. This prevents reveal elements from briefly appearing before their initial hidden state takes effect.

<!-- Place in <head> after animations.css -->
<script src="js/scroll-reveal.js"></script>
<!-- Place in <body> -->
<section data-reveal="up">A section that slides into view</section>
<div data-reveal="zoom" data-reveal-repeat>Zooms in each time it re-enters</div>

Stagger Multiple Elements

Set data-reveal-stagger on a container to animate its direct children in sequence.

The value specifies milliseconds between children.
data-reveal-type sets the reveal effect for children that lack their own data-reveal value.
Place data-reveal-repeat on an individual child if it should animate again after leaving the viewport.

<ul data-reveal-stagger="120" data-reveal-type="up">
  <li>Plan your layout</li>
  <li>Build the components</li>
  <li>Publish the page</li>
</ul>

Loading Indicators

<div role="status">
  <span class="anim-spinner" aria-hidden="true"></span>
  <span>Loading products...</span>
</div>
<div class="anim-skeleton" style="width: 220px; height: 18px" aria-hidden="true"></div>

Animated Text

The typewriter effect works best with a single line in a monospace font. Set --anim-chars to the character count of the text, including spaces and punctuation.

<h2 class="anim-typewriter" style="--anim-chars: 17; font-family: monospace">Welcome to Bloom!</h2>
<p class="anim-gradient-text">Seasonal specials</p>

CSS Animation Classes Reference

Entrance Animations

Class	Effect
`anim-fade-in`	Fade from transparent to visible.
`anim-slide-up`	Fade in from below.
`anim-slide-down`	Fade in from above.
`anim-slide-left`	Fade in from the right.
`anim-slide-right`	Fade in from the left.
`anim-zoom-in`	Fade in while scaling from 90%.
`anim-flip-in`	Flip into view around the horizontal axis.

Hover Effects

Class	Effect
`anim-hover-lift`	Raise the element and increase its shadow.
`anim-hover-grow`	Scale the element to 105%.
`anim-underline`	Draw an underline beneath the text.
`anim-shine`	Sweep a diagonal highlight across the element.
`anim-btn-fill`	Fill the background using the accent color.

Loading Animations

Class	Effect
`anim-spinner`	Rotating bordered circle.
`anim-dots`	Three animated dots; requires three child elements.
`anim-progress`	Indeterminate moving progress stripe.
`anim-skeleton`	Shimmering content placeholder.

Attention Effects

Class	Effect
`anim-pulse`	Repeating size pulse.
`anim-ping`	Repeating expanding ring behind a badge or dot.
`anim-shake`	One-time horizontal shake.
`anim-bounce`	One-time vertical bounce.
`anim-wiggle`	One-time rotation sequence.

Text Effects

Class	Effect
`anim-typewriter`	Stepped text reveal with blinking caret.
`anim-gradient-text`	Moving multicolor gradient clipped to text.

Timing And Repeat Utilities

Class	Effect
`anim-delay-1`	Set `--anim-delay` to `100ms`.
`anim-delay-2`	Set `--anim-delay` to `200ms`.
`anim-delay-3`	Set `--anim-delay` to `300ms`.
`anim-delay-4`	Set `--anim-delay` to `400ms`.
`anim-delay-5`	Set `--anim-delay` to `500ms`.
`anim-fast`	Set `--anim-duration` to `300ms`.
`anim-slow`	Set `--anim-duration` to `1200ms`.
`anim-infinite`	Repeat a CSS keyframe animation indefinitely.

Scroll Reveal Attributes

Attribute	Behavior
`data-reveal`	Select one of six effects for an element: `fade`, `up`, `down`, `left`, `right`, or `zoom`.
`data-reveal-repeat`	Presence enables replay when the element exits and re-enters the viewport.
`data-reveal-stagger`	On a parent element, sets the millisecond interval between direct children; default `100` for an empty, zero, or invalid value.
`data-reveal-type`	Sets the reveal type of staggered children that have no `data-reveal` attribute; default `up`.

Scroll Reveal Types

Both data-reveal and data-reveal-type accept the following values.

Value	Effect
`fade`	Fade into view.
`up`	Fade and move upward.
`down`	Fade and move downward.
`left`	Fade and move left.
`right`	Fade and move right.
`zoom`	Fade and scale up.

CSS Variables And Customization

Variable	Default and Purpose
`--anim-duration`	`600ms`. Duration of entrance animations and scroll transitions.
`--anim-delay`	`0ms`. Initial delay for effects that read this value.
`--anim-ease`	`cubic-bezier(0.22, 1, 0.36, 1)`. Easing for entrances, reveals, and hover effects that reference it.
`--anim-distance`	`24px`. Starting displacement for directional entrance and scroll effects.
`--anim-accent`	`#6366f1`. Accent color for button fill, spinners, dots, progress, and gradient text.
`--anim-accent-contrast`	`#ffffff`. Text color for filled buttons on hover or keyboard focus.
`--anim-chars`	`20` on `.anim-typewriter`. Character count and step timing for typewriter text; override on that class or element.

Customize Timing And Colors

Set the variables in your own stylesheet after the library CSS. For a single element, use an inline override such as style="--anim-duration: 900ms".

-root {
  --anim-duration: 800ms;
  --anim-distance: 32px;
  --anim-accent: #0f766e;
  --anim-accent-contrast: #ffffff;
}

Accessibility And Integration Notes

Decorative motion is shortened when your visitor enables prefers-reduced-motion: reduce, and loader animations run more slowly. The hover selectors include :focus-visible, although non-focusable elements do not acquire keyboard interaction automatically.

Directional slides can create horizontal overflow on narrow layouts. Apply overflow-x: clip to the page when needed, after checking any content that deliberately extends beyond the viewport.

body {
  overflow-x: clip;
}

25+ CSS Scroll/Reveal/Loading/Typing Animations for the Web – CSS Animation