CSS Animation Examples

Practical implementations of CSS animations and transitions with comprehensive examples

What You'll Learn

This page contains practical examples of CSS animation techniques that you can use in your projects. Each example includes a live demo and the corresponding code.

Examples Included:

  • Basic Transitions
  • Keyframe Animations
  • Bounce, Pulse, and Spin Effects
  • Slide and Fade Animations
  • Shake and Flip Effects
  • Progress Bars and Loading Spinners
  • Typing Animation
  • Interactive Hover Effects
  • Animated Buttons
  • 3D Card Flip

Animation Examples Implementation

Complete Example Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern CSS Animations Showcase</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      background: linear-gradient(-45deg, #0f0f23, #1a1a2e, #16213e, #0f0f23);
      background-size: 400% 400%;
      animation: gradientShift 8s ease infinite;
      color: #ffffff;
      overflow-x: hidden;
      min-height: 100vh;
    }
    
    @keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 2rem;
    }
    
    .hero {
      text-align: center;
      padding: 4rem 0;
      position: relative;
    }
    
    .hero::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(138, 43, 226, 0.1) 0%, transparent 50%);
      animation: pulse 4s ease-in-out infinite alternate;
    }
    
    .hero h1 {
      font-size: clamp(2.5rem, 8vw, 6rem);
      font-weight: 700;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradientText 3s ease infinite;
      margin-bottom: 1rem;
      position: relative;
      z-index: 1;
    }
    
    @keyframes gradientText {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    
    .hero p {
      font-size: 1.25rem;
      opacity: 0.8;
      position: relative;
      z-index: 1;
    }
    
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 2rem;
      margin-top: 4rem;
    }
    
    .card {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      padding: 2rem;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      position: relative;
      overflow: hidden;
    }
    
    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      transform: translateX(-100%);
      transition: transform 0.6s;
    }
    
    .card:hover::before {
      transform: translateX(100%);
    }
    
    .card:hover {
      transform: translateY(-8px) scale(1.02);
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.2);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }
    
    .card-title {
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
      background: linear-gradient(45deg, #fff, #a0a0a0);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .card-description {
      font-size: 0.95rem;
      opacity: 0.7;
      margin-bottom: 2rem;
      line-height: 1.6;
    }
    
    .demo-area {
      min-height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      position: relative;
      overflow: hidden;
    }
    
    /* Modern Animations */
    
    /* 1. Morphing Blob */
    .morphing-blob {
      width: 120px;
      height: 120px;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      animation: morph 8s ease-in-out infinite;
      position: relative;
      overflow: hidden;
    }
    
    .morphing-blob::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), transparent);
      transform: translate(-50%, -50%) rotate(45deg);
      animation: shimmer 2s linear infinite;
    }
    
    @keyframes morph {
      0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg); }
      25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
      50% { border-radius: 50% 60% 30% 60% / 60% 30% 60% 40%; transform: rotate(180deg); }
      75% { border-radius: 60% 40% 60% 40% / 30% 70% 40% 50%; }
    }
    
    @keyframes shimmer {
      0% { transform: translate(-50%, -50%) rotate(45deg) translateX(-100%); }
      100% { transform: translate(-50%, -50%) rotate(45deg) translateX(100%); }
    }
    
    /* 2. Neon Glow Text */
    .neon-text {
      font-size: 2rem;
      font-weight: 700;
      color: #fff;
      text-shadow: 
        0 0 5px #00ffff,
        0 0 10px #00ffff,
        0 0 15px #00ffff,
        0 0 20px #00ffff,
        0 0 35px #00ffff,
        0 0 40px #00ffff;
      animation: neonPulse 2s ease-in-out infinite alternate;
    }
    
    @keyframes neonPulse {
      from {
        text-shadow: 
          0 0 5px #00ffff,
          0 0 10px #00ffff,
          0 0 15px #00ffff,
          0 0 20px #00ffff,
          0 0 35px #00ffff,
          0 0 40px #00ffff;
      }
      to {
        text-shadow: 
          0 0 2px #00ffff,
          0 0 5px #00ffff,
          0 0 8px #00ffff,
          0 0 12px #00ffff,
          0 0 18px #00ffff,
          0 0 25px #00ffff;
      }
    }
    
    /* 3. Particle System */
    .particle-container {
      position: relative;
      width: 200px;
      height: 200px;
    }
    
    .particle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: #4ecdc4;
      border-radius: 50%;
      animation: float 3s ease-in-out infinite;
    }
    
    .particle:nth-child(1) { top: 20%; left: 20%; animation-delay: 0s; background: #ff6b6b; }
    .particle:nth-child(2) { top: 30%; left: 60%; animation-delay: 0.5s; background: #4ecdc4; }
    .particle:nth-child(3) { top: 60%; left: 30%; animation-delay: 1s; background: #45b7d1; }
    .particle:nth-child(4) { top: 70%; left: 70%; animation-delay: 1.5s; background: #96ceb4; }
    .particle:nth-child(5) { top: 40%; left: 80%; animation-delay: 2s; background: #feca57; }
    
    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 1; }
      33% { transform: translateY(-20px) rotate(120deg); opacity: 0.7; }
      66% { transform: translateY(-10px) rotate(240deg); opacity: 0.4; }
    }
    
    /* 4. Liquid Button */
    .liquid-button {
      position: relative;
      padding: 16px 32px;
      border: none;
      border-radius: 50px;
      background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
      color: white;
      font-weight: 600;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.3s ease;
    }
    
    .liquid-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      transition: all 0.5s;
    }
    
    .liquid-button:hover::before {
      left: 100%;
    }
    
    .liquid-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
    }
    
    .liquid-button:active {
      transform: translateY(0);
    }
    
    /* 5. DNA Helix */
    .dna-container {
      position: relative;
      width: 120px;
      height: 200px;
    }
    
    .dna-strand {
      position: absolute;
      width: 4px;
      height: 200px;
      background: linear-gradient(to bottom, #ff6b6b, #4ecdc4);
      border-radius: 2px;
      animation: rotate 4s linear infinite;
    }
    
    .dna-strand:nth-child(1) {
      left: 30%;
      animation-delay: 0s;
    }
    
    .dna-strand:nth-child(2) {
      right: 30%;
      animation-delay: 2s;
    }
    
    .dna-base {
      position: absolute;
      width: 60px;
      height: 2px;
      background: rgba(255, 255, 255, 0.6);
      left: 50%;
      transform: translateX(-50%);
      animation: dnaFloat 4s linear infinite;
    }
    
    .dna-base:nth-child(3) { top: 20px; animation-delay: 0s; }
    .dna-base:nth-child(4) { top: 60px; animation-delay: 1s; }
    .dna-base:nth-child(5) { top: 100px; animation-delay: 2s; }
    .dna-base:nth-child(6) { top: 140px; animation-delay: 3s; }
    
    @keyframes rotate {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(360deg); }
    }
    
    @keyframes dnaFloat {
      0%, 100% { opacity: 1; transform: translateX(-50%) rotateY(0deg); }
      50% { opacity: 0.3; transform: translateX(-50%) rotateY(180deg); }
    }
    
    /* 6. Holographic Card */
    .holographic-card {
      width: 200px;
      height: 120px;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
      background-size: 400% 400%;
      animation: holographicShine 3s ease infinite;
      border-radius: 16px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    
    .holographic-card::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transform: rotate(45deg);
      animation: holoSweep 2s linear infinite;
    }
    
    .holographic-card:hover {
      transform: rotateY(15deg) rotateX(15deg);
    }
    
    @keyframes holographicShine {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    
    @keyframes holoSweep {
      0% { transform: rotate(45deg) translateX(-200%); }
      100% { transform: rotate(45deg) translateX(200%); }
    }
    
    /* 7. Wave Loader */
    .wave-loader {
      display: flex;
      gap: 4px;
      align-items: center;
    }
    
    .wave-bar {
      width: 8px;
      height: 40px;
      background: linear-gradient(to top, #ff6b6b, #4ecdc4);
      border-radius: 4px;
      animation: wave 1.5s ease-in-out infinite;
    }
    
    .wave-bar:nth-child(1) { animation-delay: 0s; }
    .wave-bar:nth-child(2) { animation-delay: 0.1s; }
    .wave-bar:nth-child(3) { animation-delay: 0.2s; }
    .wave-bar:nth-child(4) { animation-delay: 0.3s; }
    .wave-bar:nth-child(5) { animation-delay: 0.4s; }
    .wave-bar:nth-child(6) { animation-delay: 0.5s; }
    .wave-bar:nth-child(7) { animation-delay: 0.6s; }
    
    @keyframes wave {
      0%, 100% { height: 40px; opacity: 0.3; }
      50% { height: 80px; opacity: 1; }
    }
    
    /* 8. Magnetic Hover */
    .magnetic-container {
      position: relative;
      width: 200px;
      height: 200px;
      cursor: pointer;
    }
    
    .magnetic-orb {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 80px;
      height: 80px;
      background: radial-gradient(circle at 30% 30%, #4ecdc4, #45b7d1);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      box-shadow: 0 20px 40px rgba(78, 205, 196, 0.3);
    }
    
    .magnetic-container:hover .magnetic-orb {
      transform: translate(-50%, -50%) scale(1.2);
      box-shadow: 0 30px 60px rgba(78, 205, 196, 0.5);
    }
    
    .magnetic-field {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 120px;
      height: 120px;
      border: 2px solid rgba(78, 205, 196, 0.2);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: magneticPulse 2s ease infinite;
    }
    
    @keyframes magneticPulse {
      0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.2; }
      50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.8; }
    }
    
    /* 9. Glitch Text */
    .glitch-text {
      font-size: 2rem;
      font-weight: 700;
      color: #fff;
      position: relative;
      animation: glitch 2s infinite;
    }
    
    .glitch-text::before,
    .glitch-text::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    .glitch-text::before {
      animation: glitchTop 1s linear infinite;
      clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
      color: #ff6b6b;
    }
    
    .glitch-text::after {
      animation: glitchBottom 1.5s linear infinite;
      clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
      color: #4ecdc4;
    }
    
    @keyframes glitch {
      5%, 42% { transform: none; filter: hue-rotate(0deg); }
      43%, 44% { transform: skew(-0.5deg, -0.9deg); filter: hue-rotate(90deg); }
      45%, 50% { transform: none; filter: hue-rotate(0deg); }
    }
    
    @keyframes glitchTop {
      5%, 25%, 40%, 72%, 88%, 90% { transform: translate(-2px, -1px); }
      30%, 35%, 65%, 70%, 82%, 85% { transform: translate(2px, 1px); }
    }
    
    @keyframes glitchBottom {
      5%, 15%, 25%, 40%, 72%, 88%, 90% { transform: translate(2px, 1px); }
      30%, 35%, 65%, 70%, 82%, 85% { transform: translate(-2px, -1px); }
    }
    
    /* 10. Floating Islands */
    .floating-islands {
      position: relative;
      width: 250px;
      height: 200px;
    }
    
    .island {
      position: absolute;
      background: linear-gradient(45deg, #96ceb4, #85c9c0);
      border-radius: 50px;
      animation: floatIsland 4s ease-in-out infinite;
    }
    
    .island:nth-child(1) {
      width: 80px;
      height: 30px;
      top: 20px;
      left: 20px;
      animation-delay: 0s;
    }
    
    .island:nth-child(2) {
      width: 60px;
      height: 20px;
      top: 80px;
      right: 30px;
      animation-delay: 1s;
    }
    
    .island:nth-child(3) {
      width: 70px;
      height: 25px;
      bottom: 30px;
      left: 50px;
      animation-delay: 2s;
    }
    
    @keyframes floatIsland {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-15px) rotate(2deg); }
    }
    
    /* Code display */
    .code-snippet {
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 1.5rem;
      margin-top: 1.5rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.9rem;
      line-height: 1.5;
      color: #e2e8f0;
      overflow-x: auto;
    }
    
    .code-snippet .keyword {
      color: #7c3aed;
    }
    
    .code-snippet .property {
      color: #06b6d4;
    }
    
    .code-snippet .value {
      color: #10b981;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }
      
      .hero h1 {
        font-size: 3rem;
      }
      
      .card {
        padding: 1.5rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="hero">
      <h1>CSS Animations</h1>
      <p>Cutting-edge CSS animations that push the boundaries of web design</p>
    </div>
    
    <div class="grid">
      <div class="card">
        <h3 class="card-title">🌊 Morphing Blob</h3>
        <p class="card-description">Organic shape-shifting animation with shimmer effects that creates mesmerizing fluid motion</p>
        <div class="demo-area">
          <div class="morphing-blob"></div>
        </div>
      </div>
      
      <div class="card">
        <h3 class="card-title">✨ Neon Glow Text</h3>
        <p class="card-description">Cyberpunk-inspired text with dynamic neon glow that pulses with electric energy</p>
        <div class="demo-area">
          <div class="neon-text">GLOW</div>
        </div>
      </div>
      
      <div class="card">
        <h3 class="card-title">🌌 Particle System</h3>
        <p class="card-description">Floating particles with complex motion patterns that create an ethereal atmosphere</p>
        <div class="demo-area">
          <div class="particle-container">
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
          </div>
        </div>
      </div>
      
      <div class="card">
        <h3 class="card-title">🔮 Liquid Button</h3>
        <p class="card-description">Modern button with flowing liquid-like hover effects and smooth micro-interactions</p>
        <div class="demo-area">
          <button class="liquid-button">Hover Me</button>
        </div>
      </div>
      
      <div class="card">
        <h3 class="card-title">🧬 DNA Helix</h3>
        <p class="card-description">Bio-inspired double helix animation with rotating strands and floating genetic bases</p>
        <div class="demo-area">
          <div class="dna-container">
            <div class="dna-strand"></div>
            <div class="dna-strand"></div>
            <div class="dna-base"></div>
            <div class="dna-base"></div>
            <div class="dna-base"></div>
            <div class="dna-base"></div>
          </div>
        </div>
      </div>
      
      <div class="card">
        <h3 class="card-title">🌈 Holographic Card</h3>
        <p class="card-description">Prismatic card effect with rainbow gradients and holographic shine animations</p>
        <div class="demo-area">
          <div class="holographic-card">
            Hologram
          </div>
        </div>
      </div>
      
      <div class="card">
        <h3 class="card-title">🎵 Wave Loader</h3>
        <p class="card-description">Audio visualizer-inspired loading animation with rhythmic wave patterns</p>
        <div class="demo-area">
          <div class="wave-loader">
            <div class="wave-bar"></div>
            <div class="wave-bar"></div>
            <div class="wave-bar"></div>
            <div class="wave-bar"></div>
            <div class="wave-bar"></div>
            <div class="wave-bar"></div>
            <div class="wave-bar"></div>
          </div>
        </div>
      </div>
      
      <div class="card">
        <h3 class="card-title">🧲 Magnetic Hover</h3>
        <p class="card-description">Interactive magnetic field effect with orbital elements and responsive scaling</p>
        <div class="demo-area">
          <div class="magnetic-container">
            <div class="magnetic-field"></div>
            <div class="magnetic-orb"></div>
          </div>
        </div>
      </div>
      
      <div class="card">
        <h3 class="card-title">⚡ Glitch Text</h3>
        <p class="card-description">Digital corruption effect with RGB separation and distortion artifacts</p>
        <div class="demo-area">
          <div class="glitch-text" data-text="GLITCH">GLITCH</div>
        </div>
      </div>
      
      <div class="card">
        <h3 class="card-title">🏝️ Floating Islands</h3>
        <p class="card-description">Dreamy levitating elements with gentle bobbing motion and depth illusion</p>
        <div class="demo-area">
          <div class="floating-islands">
            <div class="island"></div>
            <div class="island"></div>
            <div class="island"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Key CSS Animation Concepts Demonstrated

Transitions

  • transition-property - Which properties to animate
  • transition-duration - How long the transition takes
  • transition-timing-function - Speed curve of transition
  • transition-delay - When the transition will start
  • transition - Shorthand for all transition properties

Animations

  • @keyframes - Defines the animation sequence
  • animation-name - Specifies which keyframes to use
  • animation-duration - How long the animation takes
  • animation-timing-function - Speed curve of animation
  • animation-iteration-count - How many times to play
  • animation-direction - Normal, reverse, alternate, etc.
  • animation-fill-mode - Styles before/after animation

Animation Best Practices

Do's

  • Use CSS animations for performance over JavaScript
  • Animate transform and opacity for best performance
  • Keep animations subtle and purposeful
  • Use will-change property for elements you plan to animate
  • Provide controls for users to reduce motion if needed
  • Test animations on different devices and browsers

Don'ts

  • Don't overuse animations - they can be distracting
  • Avoid animating properties that cause layout reflows
  • Don't make animations too long or complex
  • Avoid animating too many elements simultaneously
  • Don't forget to consider accessibility needs
  • Avoid animations that could trigger motion sickness

Animation Performance Tips

Optimizing Your Animations

  • Use transforms and opacity: These properties can be handled by the GPU and don't trigger layout or paint operations
  • Avoid animating properties like width/height: These trigger layout recalculations and are performance-intensive
  • Use will-change sparingly: Hint browsers about what will animate but don't overuse it
  • Limit the number of animated elements: Too many simultaneous animations can cause jank
  • Test on target devices: Lower-powered devices may struggle with complex animations
  • Consider reducing motion for users who prefer it: Use the prefers-reduced-motion media query

Ready to Experiment with CSS Animations?

Try these animation examples in our interactive editor. Modify the code, see the results in real-time, and practice implementing animations in your projects.

< PreviousNext >