CSS Animations

• Examples
• Intro to CSS Animations

Use CSS animations to bring your webpages to life!

Tutorial

Learn CSS Animations and bring your webpages to life with engaging, smooth motion effects!

• Animations - Introduction
• Animations - @keyframes
• Animations - Properties
• Animations - Shorthand
• Animations - Multiple
• Animations - Examples
• Animations - Best Practices

Examples

This section provides a curated list of common UI animation techniques, ranging from micro-interactions to complex background effects. Each example includes the CSS and HTML code needed to implement it, along with a live preview and explanations of the techniques used, including best practices for accessibility such as respecting the prefers-reduced-motion media query.

Interaction Essentials (Buttons & Inputs)

These are the "bread and butter" of web animation, focusing on micro-interactions.

• The Pulse
  A soft, radiating glow for Call-to-Action buttons.
• Slide-In Border
  A sophisticated underline that grows from the center on hover.
• The Jelly Wobble
  A playful, elastic squeeze effect when clicked.
• Floating Label
  Smooth vertical transition for form input labels.
• Magnetic Button
  A subtle "pull" effect following the cursor (CSS-only version).
• Shake Error
  A quick horizontal vibrate for failed form submissions.

Loading & Progress Indicators

Essential for keeping users engaged during data fetching.

• Infinite Spinner
  The classic rotating arc with easing.
• Bouncing Dots
  Three dots with staggered animation delays.
• The Skeleton Wave
  A shimmering gradient overlay for content placeholders.
• Filling Bar
  A linear progress bar that eases from 0% to 100%.
• Circular Dash
  An SVG-based stroke-dasharray animation.
• The Morphing Square
  A square that rotates and transforms into a circle.

Navigation & Menu Effects

• Hamburger to X
  The standard mobile menu icon transformation.
• Staggered List Slide
  Menu items that slide in one after another.
• The Underline Swish
  A nav link highlight that follows the mouse.
• Reveal Drawer
  A side-nav that pushes or slides over the main content.
• Dropdown Fade & Scale
  Smooth entry for nested navigation items.

Cards & Content Reveal

• 3D Card Flip
  A double-sided card that flips on the Y-axis.
• Reveal on Scroll
  Elements that fade and rise as they enter the viewport.
• The Glassmorphism Shimmer
  A light streak passing over a frosted glass card.
• Image Zoom & Pan
  Subtle scaling within a container on hover.
• Caption Slide-Up
  Descriptive text that appears over an image.
• The Stacked Card Fan
  Cards that spread out when the top one is hovered.

Text & Typography Effects

• Typewriter Effect
  Text that "types" itself out letter by letter.
• Text Gradient Shift
  A moving color gradient inside the font.
• Focus Blur
  Text that starts blurred and snaps into focus.
• The Glitch
  A cyberpunk-style rapid offset and color split.
• Strikethrough Draw
  An animated line that "crosses out" text.

Backgrounds & Decorative

• Animated Mesh Gradient
  Soft, moving blobs of color in the background.
• Floating Particles
  Simple shapes drifting upward at varying speeds.
• The Ken Burns Effect
  A slow, cinematic zoom-and-pan for hero images.
• Infinite Scrolling Marquee
  A continuous loop of logos or text.

• Examples
• Intro to CSS Animations