Every CSS animation pattern you'll ever need — fades, slides, bounces, text effects, loaders and backgrounds. Click any preview to replay. Copy the code instantly.
An animation should tell the user something happened — that an item was added, an action succeeded, content is loading. Picking the wrong category makes an interface feel busy instead of responsive. Here's what each of the seven types is actually for.
The safest transition for content appearing or disappearing — modals, tooltips, page sections on scroll. Low-key enough to use often without becoming distracting.
Communicates direction and origin — a drawer sliding in from the edge, a notification entering from the top. Use it when where something comes from is part of the message.
Draws the eye to a single element — an icon on hover, a button on click. Effective precisely because it's used sparingly; on more than one or two elements per screen it stops feeling special.
Adds personality and confirms an action landed — an add-to-cart icon, a like button. Reserve it for playful, consumer-facing interfaces; it reads as unserious on a B2B dashboard.
Typewriter, character-reveal, and gradient-text effects for headlines and hero sections — a one-time attention-getter, not something to apply to body copy or repeated UI text.
Spinners, skeleton screens, and progress indicators exist to make a wait feel shorter, not to look impressive. The best loading animation is the one a user stops noticing.
Ambient, continuous motion for hero sections and landing pages — gradients shifting, particles drifting. Keep it slow and low-contrast so it never competes with foreground content.
prefers-reduced-motion. Wrap non-essential animation in @media (prefers-reduced-motion: no-preference) so users who've asked their OS to minimize motion actually get a calmer interface — it's a real accessibility setting, not an edge case.
CSS animations use @keyframes to define states, then animation properties to apply them: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count and animation-fill-mode.
Transitions trigger on state changes (hover, focus, class toggle) and animate between two values. Animations use @keyframes to run automatically, loop, and define multiple intermediate steps. Use transitions for hover effects and animations for looping or auto-playing effects.
Set animation-iteration-count: infinite. Example: .el { animation: spin 1s linear infinite; } Use animation-direction: alternate to reverse on each loop for a ping-pong effect.
Use the animation-delay property. Example: .el { animation: fadeIn 0.5s ease 0.3s forwards; } For staggered children, increment the delay: :nth-child(1) { animation-delay: 0s } :nth-child(2) { animation-delay: 0.1s } etc.
animation-fill-mode: forwards keeps the element in the final keyframe state after the animation ends. Without it, the element snaps back to its original CSS. Always use forwards for entrance animations (fade in, slide in) so the element stays visible.