Animations break down into clear patterns, each with a name you can feed an AI. For making elements show or hide, you’ve got Fade in/out for opacity shifts, Slide in from any edge, Scale in where it grows, Pop in with a bounce overshoot, and Reveal via clip-path or mask. “Enter/Exit” is the catch-all for an element’s add/remove motion. When multiple parts move together, you rely on keyframes (0%, 50%, 100%), interpolation or tweening to fill the gaps, and techniques like Stagger for cascades or Orchestration to time everything as one flow. You also tweak Delay, Duration, and Fill mode to control start times, lengths, and whether styles stick before or after. Moving or resizing uses CSS Transforms: Translate along X/Y, Scale, Rotate, Skew, and even 3D Tilt/Flip with a Perspective setting. Transform origin decides the pivot point, while origin-aware animation means an element grows from its trigger rather than its center. For connecting states, Crossfade swaps elements by fading, Morph reshapes one form into another, and Shared element transitions physically carry an item from one spot to another. Layout animations smooth size and position shifts, and direction-aware transitions slide content one way on forward navigation and the opposite on back. Scroll-driven effects include Scroll reveal (fade/slide into view), Parallax layers moving at different rates, and page or view transitions that animate between routes or browser states. User actions trigger Hover effects, Press/Tap feedback with a slight scale-down, Hold to confirm, and various Drag patterns—drag to reorder, swipe to dismiss, even rubber-band overscroll. Shake or Wiggle signals errors, Ripple shows tap confirmation. Easing defines speed curves: ease-out (fast start, slow end) is standard; ease-in-out sits slow-fast-slow; linear suits spinners. For more life, physics-based Springs use tension, damping, mass, and carry momentum and velocity, letting animations be interruptible midflight. On their own, loops like Marquee, Pulse, Float, Orbit, or Idle keep interfaces feeling alive. Small touches include Blur filters, Clip-path or Mask reveals, before/after sliders, SVG Line drawing, Text morph character by character, Skeleton or Shimmer placeholders, Number tickers, and Typewriter text. All of it demands a solid frame rate—60 fps baseline, 120 fps on fast screens—and vigilance against jank, which happens when frames drop. Each pattern has a name and precise behavior, so you can ask an AI to match your vision exactly.