TechTrends Now - Tech News for Builders and Operators

CSS animations can make a site feel alive — or overwhelming. This guide covers 40 CSS animation examples organized by type: from the basics every developer should know, to advanced effects like typewriter text, neon flicker, and aurora backgrounds.

🔗 Interactive version with live demos + click-to-replay: uixdraft.com/css-animation-examples

CSS Animation Basics

Every CSS animation needs two things:

@keyframes — defines the states the element moves through
animation property — applies the keyframes to an element

/* 1. Define the animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 2. Apply it */
.element {
  animation: fadeIn 0.5s ease forwards;
  /*         name   dur  easing fill-mode */
}

Category 1: Fade Animations

Fade In Up

The most common entrance animation — element fades in while rising.

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-up {
  animation: fadeInUp 0.6s ease forwards;
}

Staggered Fade In

Multiple elements animate in sequence using animation-delay:

.item { animation: fadeInUp 0.5s ease both; }
.item:nth-child(1) { animation-delay: 0.0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }
.item:nth-child(4) { animation-delay: 0.3s; }

Category 2: Slide Animations

Float (continuous)

Perfect for hero illustrations — a gentle up-and-down loop.

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}
.float {
  animation: float 2.5s ease-in-out infinite;
}

Marquee (scrolling text)

Infinite horizontal scroll — announcements and logo strips.

@keyframes marquee {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
.marquee {
  display: inline-block;
  animation: marquee 6s linear infinite;
  white-space: nowrap;
}

Category 3: Bounce & Spring

Bounce

Physics-based bounce with cubic-bezier easing:

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-28px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
.bounce { animation: bounce 1s ease-in-out infinite; }

Rubber Band

Squash and stretch effect that makes elements feel physical:

@keyframes rubberBand {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.25, 0.75); }
  40%  { transform: scale(0.75, 1.25); }
  50%  { transform: scale(1.15, 0.85); }
  65%  { transform: scale(0.95, 1.05); }
  75%  { transform: scale(1.05, 0.95); }
  100% { transform: scale(1, 1); }
}
.rubber-band { animation: rubberBand 1s ease; }

Category 4: Text Animations

Typewriter Effect

Pure CSS — no JavaScript needed.

@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes cursorBlink {
  0%, 100% { border-color: #34d399; }
  50%       { border-color: transparent; }
}
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  width: fit-content;
  border-right: 2px solid #34d399;
  animation:
    typewriter 2s steps(20) forwards,
    cursorBlink 0.7s step-end infinite;
}

Gradient Text Shift

Animated gradient flowing through text:

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-text {
  background: linear-gradient(90deg, #a78bfa, #38bdf8, #34d399, #fbbf24, #a78bfa);
  background-size: 300% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: gradientShift 3s linear infinite;
}

Category 5: Loaders

CSS Spinner

The classic — just two lines of CSS:

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 44px; height: 44px;
  border: 3px solid rgba(99,102,241,0.15);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

Dot Pulse

Three-dot typing indicator:

@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
  40%           { transform: scale(1); opacity: 1; }
}
.dot {
  width: 10px; height: 10px;
  background: #6366f1; border-radius: 50%;
  animation: dotPulse 1.2s ease-in-out infinite both;
}
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

Skeleton Loading

The shimmer placeholder effect used by Facebook, LinkedIn, YouTube:

@keyframes skeleton {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.10) 37%,
    rgba(255,255,255,0.04) 63%
  );
  background-size: 400px 100%;
  animation: skeleton 1.2s linear infinite;
}

Category 6: Background Animations

Animated Gradient Background

Hue cycles continuously — popular for hero sections:

@keyframes gradFlow {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
.animated-bg {
  background: linear-gradient(270deg, #6366f1, #ec4899, #f97316, #38bdf8);
  background-size: 400% 400%;
  animation: gradFlow 6s ease infinite;
}

Blob Morphing

Organic shape shifting — abstract hero backgrounds:

@keyframes blobMove {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}
.blob {
  animation: blobMove 5s ease-in-out infinite;
  background: linear-gradient(135deg, #a78bfa, #38bdf8);
}

Key Animation Properties Cheatsheet

.element {
  animation-name: fadeIn;           /* @keyframes name */
  animation-duration: 0.5s;        /* how long */
  animation-timing-function: ease; /* easing curve */
  animation-delay: 0.2s;           /* wait before start */
  animation-iteration-count: 1;    /* or 'infinite' */
  animation-direction: normal;     /* or 'alternate', 'reverse' */
  animation-fill-mode: forwards;   /* hold final state */
  animation-play-state: running;   /* or 'paused' */
}
/* Shorthand: name duration easing delay iterations direction fill */
animation: fadeIn 0.5s ease 0.2s 1 normal forwards;

All 40 Animations with Live Demos

The complete collection — including neon flicker, pop-in, ping ripple, aurora, and animated background grain — is available with live click-to-replay previews at:

👉 uixdraft.com/css-animation-examples

Also check out: CSS Button Styles (50 examples) · CSS Grid Examples (35 patterns) · CSS Card Design (40 examples)

CSS Animation Examples — 40 Live Demos You Can Copy (2025)