CSS Micro-animations

How keyframe animation works

Each snippet follows the same two-part structure. A @keyframes rule declares the animation states, and a utility class such as .anim-pulse applies them with the animation shorthand. Inside the rule, the from and to keywords mark the first and last frames, while percentage blocks such as 50% define intermediate stops. During playback the browser interpolates the property values between the declared frames, so you describe two or more states and the engine produces every frame in between. Percentage stops act as checkpoints inside each cycle, and the easing function shapes the movement between them. Duration, timing function and loop count all live in the class, so the same keyframes can feed several utilities.

Every card below runs live before you copy it.

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.anim-fade-in {
  animation: fade-in 1.6s ease-in-out infinite;
}

@keyframes slide-up {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.anim-slide-up {
  animation: slide-up 1.6s ease-out infinite;
}

@keyframes scale-in {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.anim-scale-in {
  animation: scale-in 1.6s ease-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.14);
    opacity: 0.82;
  }
}

.anim-pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.anim-spin {
  animation: spin 1.1s linear infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-12px);
  }
  80% {
    transform: translateY(-4px);
  }
}

.anim-bounce {
  animation: bounce 1.4s ease-in-out infinite;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-8px);
  }
  40% {
    transform: translateX(8px);
  }
  60% {
    transform: translateX(-6px);
  }
  80% {
    transform: translateX(6px);
  }
}

.anim-shake {
  animation: shake 0.7s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.anim-shimmer {
  background: linear-gradient(
    110deg,
    #26262b 40%,
    #a35fff 50%,
    #26262b 60%
);
  background-size: 200% 100%;
  animation: shimmer 2.2s linear infinite;
}

@keyframes wobble {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-12deg);
  }
  75% {
    transform: rotate(12deg);
  }
}

.anim-wobble {
  animation: wobble 1s ease-in-out infinite;
}

@keyframes flip {
  from {
    transform: perspective(400px) rotateY(0deg);
  }
  to {
    transform: perspective(400px) rotateY(360deg);
  }
}

.anim-flip {
  animation: flip 1.8s ease-in-out infinite;
}

Breaking down the animation shorthand

The animation property groups several sub-properties into one declaration, and that order is what keeps these snippets compact. The first word is the keyframe name, the time value is the duration, the keyword is the easing function, and the trailing infinite sets the iteration count. Because the shorthand lives inside the class, a single keyframes rule can feed many variations. Fade-in is reused whenever text or a card should enter quietly, while slide-up adds a translateY offset to the same opacity fade for a directional reveal.

Easing picks the curve that fits each preset's role.

When to use animation instead of transition

Transitions and animations solve different problems, and choosing between them keeps stylesheets predictable. A transition reacts to a state change such as a hover or a class toggle, and it runs once. An animation plays on its own schedule, which makes it the right tool for entrances, attention states and loops that should run without any user interaction. The distinction matters because the two features use separate longhand properties, and mixing them on the same property can produce surprising results.

Accessibility and reduced motion

Motion is not neutral for every visitor. WCAG 2.2 criterion 2.3.3 covers animation triggered by interaction, and the broader guidance for motion-sensitive users recommends that large, flashing or long-running movement offer a way to pause, stop or hide it. The infinite loops in this library are decorative previews, but the same snippets can feel strong in a real interface. Plan a companion rule that respects the prefers-reduced-motion media query and replaces looping motion with a static state when the visitor asks for less movement. It costs little and prevents the worst outcomes for sensitive users.

Common mistakes

The most frequent errors appear in the shorthand, not in the keyframes. Because animation resets any sub-property you omit, declaring it twice on the same element can silently drop an earlier easing or delay, so keep one source of truth per class. Second, compare the intended role with the effect. A shake that fits a compact error message can feel aggressive on a large banner. Third, remember the iteration count, because a long-running infinite loop on a busy page deserves the accessible treatment described above.

One sentence per class. Name, duration, easing, repetition.

Browser support

The animation shorthand and the @keyframes rule are supported across current engines per the MDN compatibility data.