Snippets

CSS Micro-animations

A curated set of small, reusable CSS keyframe animations. Every card renders the effect live on an infinite loop, so what you see is exactly what the snippet produces. Copy the self-contained @keyframes block and class straight into your stylesheet.

Fade In

Ease an element from fully transparent to fully opaque — the go-to entrance for text and cards.

Loop

CSS

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

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

Slide Up

Rise into place from below while fading in — a classic reveal for sections and modals.

Loop

CSS

@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;
}

Scale In

Grow from 60% with a fade for a gentle pop-in on dialogs, tooltips, and cards.

Loop

CSS

@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;
}

Pulse

A subtle breathing scale that draws the eye to CTAs, badges, and live indicators.

Loop

CSS

@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;
}

Spin

Constant 360° rotation for loaders, spinners, and processing states.

Loop

CSS

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

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

Bounce

A playful vertical hop with easing that lands softly at the bottom.

Loop

CSS

@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;
}

Shake

Rapid horizontal jitter for error states, invalid input, and attention-grabbing alerts.

Loop

CSS

@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;
}

Shimmer

A light sweep glides across a surface — the classic skeleton-loader treatment.

Loop

CSS

@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;
}

Wobble

Rock side to side with a slight rotation for playful, offbeat emphasis.

Loop

CSS

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

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

Flip

Full 3D rotation around the Y axis for card reveals and coin-flip effects.

Loop

CSS

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

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