CSS Animation Snippets

1. Entrance animations

Play once when the page loads. Great for hero headlines and buttons.

Copy<h1 class="anim-slide-up">Welcome</h1>
<p class="anim-slide-up anim-delay-2">Arrives 200ms later</p>

2. Scroll reveal

Elements animate as visitors scroll to them. Requires js/scroll-reveal.js. Scroll down and back up: the last row repeats.

Copy<section data-reveal="up">...</section>

<!-- children appear one by one, 120ms apart -->
<div data-reveal-stagger="120">
  <div>Service 1</div>
  <div>Service 2</div>
  <div>Service 3</div>
</div>

3. Hover effects

Hover (or Tab to) each item. Ideal for buttons, product cards and navigation.

Copy<a href="/book" class="btn anim-shine">Book now</a>
<div class="product-card anim-hover-lift">...</div>

4. Loaders

Show these while a form submits or content loads.

Copy<span class="anim-spinner" role="status">
  <span class="sr-only">Loading</span>
</span>

<span class="anim-dots" role="status"><i></i><i></i><i></i></span>

5. Attention seekers

Draw the eye to one important thing: a sale badge, a "Live" indicator, a form error.

Copy<span class="badge anim-pulse">SALE</span>
<span class="status-dot anim-ping"></span> Live
<input class="anim-shake" aria-invalid="true">

6. Text effects

Copy<!-- set --anim-chars to the number of characters -->
<h1 class="anim-typewriter" style="--anim-chars: 17">Welcome to Bloom!</h1>

<h2 class="anim-gradient-text">Grand Opening</h2>

Make it match your brand

Change a few variables once and every animation updates.

Copy:root {
  --anim-duration: 800ms;   /* slower, calmer   */
  --anim-distance: 40px;    /* bigger slides    */
  --anim-accent: #0f766e;   /* your brand color */
}