CSS Animations

CSS lets you animate elements on your page — fading in, sliding, pulsing, spinning — without any JavaScript. This guide covers the two main tools: transitions (simple state changes) and animations (full keyframe sequences), plus how to use Animista to generate animation code and drop it into your page.

Transitions

A transition smoothly moves an element from one style state to another — usually on hover. You define the transition in your CSS, then write a second rule (often :hover) that changes the property.

.card {
  background-color: #eee;
  transition: background-color 0.3s ease;
}

.card:hover {
  background-color: #ccc;
}

The transition property takes three values: what to animate, how long, and the easing curve (ease, linear, ease-in, ease-out).

Common things to transition: color, background-color, opacity, transform, box-shadow.

Keyframe Animations

For anything more complex than a hover effect — a background that slowly pans, an element that pulses, a heading that slides in — you use @keyframes.

A keyframe animation has two parts:

1. The @keyframes rule — defines what changes at each point in the animation:

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

2. The class that applies the animation — attaches the keyframes to an element and sets timing:

.fade-in {
  animation: fade-in 1s ease both;
}

Then in your HTML, add that class to the element:

<h1 class="fade-in">My Headline</h1>

Using Animista

Animista is a tool that lets you browse, preview, and customize CSS animations, then generate the code for you. Here's how to use what it gives you.

What Animista generates

After you pick and configure an animation, click Generate Code. You'll get two blocks of CSS. Here's an example:

.bg-pan-left {
  -webkit-animation: bg-pan-left 8s both;
          animation: bg-pan-left 8s both;
}

@-webkit-keyframes bg-pan-left {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes bg-pan-left {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

The -webkit- prefixed versions (both the class and the @keyframes) are for older Safari. Keep them — they don't hurt anything.

Where to put each part

Both blocks go in your CSS file (styles.css). You can paste them at the bottom, or group them in a clearly labeled section:

/* ========================
   Animations
   ======================== */

.bg-pan-left {
  -webkit-animation: bg-pan-left 8s both;
          animation: bg-pan-left 8s both;
}

@-webkit-keyframes bg-pan-left {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes bg-pan-left {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Applying the animation to an element

Once the CSS is in your stylesheet, add the class to the HTML element you want to animate:

<header class="bg-pan-left">
  <h1>My Article</h1>
</header>

That's it. The animation will run as soon as the element loads.

Customizing timing

You can edit the animation duration directly in the class rule — no need to go back to Animista:

.bg-pan-left {
  -webkit-animation: bg-pan-left 8s both;   /* ← change 8s to adjust speed */
          animation: bg-pan-left 8s both;
}

Common timing values: 0.3s (quick), 1s (medium), 3s (slow), 8s (very slow background pan).

Quick Reference