AI CSS Animations

CSS Keyframe Animations

90 CSS @keyframes animations for any element: fade, slide, zoom, flip and bounce entrances, and shake, pulse, heartbeat and wobble attention seekers. An animate.css-style library as plain CSS you paste.

Fade In

The plain opacity fade: transparent to solid on a soft ease-out. Fill mode both keeps the element hidden until the animation starts, so there is no flash of content.

entrance · one-shot · fade

Fade In Up

Rises about two em while it fades in, on an ease-out quint so it lands softly. The go-to reveal for cards, images and page sections as they load.

entrance · one-shot · fade · slide

Fade In Down

Drops a short way from above while scaling up from 96 percent, anchored at its top edge. The motion menus and dropdowns use, kept quick at half a second.

entrance · one-shot · fade · slide

Fade In Left

Glides in from the left on an expo ease-out while a shorter linear fade runs alongside. Two animations on one element, so the opacity is done before the motion settles.

entrance · one-shot · fade · slide

Fade In Right

Arrives from the right with the fade finished at 40 percent, so the last stretch is pure motion easing out. Suits chat replies, next steps and side panels.

entrance · one-shot · fade · slide

Slide In Left

A long, solid slide from the left with no fade, on a drawer-style curve: fast out of the gate, then a long glide into place. Right for side menus, drawers and panels.

entrance · one-shot · slide

Slide In Right

Slides in from the right, overshoots a fraction of an em and eases back, like a toast notification landing. Per-keyframe timing functions shape each leg.

entrance · one-shot · slide

Slide In Up

Rises out of its own bottom edge: a clip-path inset moves with the transform, so the element never overlaps what sits below it. Good for sheets, footers and reveal cards.

entrance · one-shot · slide

Slide In Down

Drops out of its own top edge like a dropdown panel, overshoots a touch and settles. The clip-path inset follows every keyframe so nothing shows above the fold line.

entrance · one-shot · slide

Zoom In

Grows from 30 percent while fading in over the first half, then eases out to full size. The standard modal and lightbox entrance, and it works on any element.

entrance · one-shot · zoom · fade

Zoom In Up

Starts small below its spot, accelerates up past it while growing to half size, then eases back down to full scale. Two legs, each with its own timing function.

entrance · one-shot · zoom · slide

Scale Up Center

Pops from half size to full with no fade, on an ease-out back curve that overshoots by a few percent. Snappy enough for badges, buttons, modals and new list items.

entrance · one-shot · zoom

Puff In

Starts oversized, blurred and transparent, then collapses into focus on an ease-in curve so it lands with a small thump. Animates filter, so keep it for a few elements.

entrance · one-shot · zoom · fade

Bounce In

Springs in from 20 percent scale and rings out: 112, 93, 104, then 98.5 percent before it rests. Each leg eases out, so every swing decelerates like a real spring.

entrance · one-shot · bounce · zoom

Bounce In Down

Falls from above, stretched by speed, squashes flat on landing, then hops twice on a shrinking arc. The origin sits at the bottom edge so the squash stays on the floor.

entrance · one-shot · bounce

Bounce In Up

Launches up from below stretched tall, overshoots, drops back into a small squash and settles. Reads like a spring jumping into place rather than a ball dropping.

entrance · one-shot · bounce

Bounce In Left

Shoots in from the left stretched wide, overshoots, and rebounds three times with shrinking amplitude. The horizontal squash on each turn sells the springiness.

entrance · one-shot · bounce · slide

Back In Up

Travels up from below at 70 percent size and partly see-through, then grows to full size on an ease-out back curve. The shrunken approach makes it read as coming from behind.

entrance · one-shot · zoom · slide

Back In Left

Crosses from the left at 70 percent scale, pauses a beat on its mark, then swells to full size with a small overshoot keyframe. Wide travel suits hero cards and slides.

entrance · one-shot · zoom · slide

Flip In X

Flips into view around its horizontal axis in perspective, overshoots past flat and wobbles to rest. The perspective() sits inside the transform, so no wrapper is needed.

entrance · one-shot · flip

Flip In Y

Turns in on its vertical axis like a card being flipped face up, with one ease-out back overshoot instead of a wobble. Starts edge-on, so the back face never shows.

entrance · one-shot · flip

Swing In Top

Hinged at its top edge, it swings down out of the page and rocks like a hanging sign: a gravity ease-in on the drop, then ease-in-out swings that shrink to rest.

entrance · one-shot · flip

Rotate In

Spins in from minus 200 degrees at half size, unwinding and growing at once on an ease-out quint so the last few degrees crawl. A playful entrance for icons and badges.

entrance · one-shot · rotate · zoom

Rotate In Down Left

Pivots down into place around its bottom left corner, like a door swinging shut, and overshoots by a few degrees. Moving transform-origin to a corner is the whole trick.

entrance · one-shot · rotate

Roll In

Rolls in from the left, turning a third of a revolution as it travels so the spin roughly matches the distance. Fades up over the same curve and lands square.

entrance · one-shot · rotate · slide

Light Speed In Right

Streaks in from the right leaning back on a skewX, tips forward as it brakes, then settles upright. Skew suggests speed without the cost of a blur filter.

entrance · one-shot · slide · fade

Tilt In

Comes forward out of the page from a tilted 3D pose, turned on two axes, and straightens as it lands. One perspective() transform, no wrapper, ease-out quint.

entrance · one-shot · rotate · fade

Scale Up Bottom

Grows upward from its bottom edge with scaleY, overshoots and springs back, the way chart bars and bottom sheets rise. The origin at 50% 100% keeps the base planted.

entrance · one-shot · zoom · bounce

Fade In Blur

Comes into focus: opacity rises while a filter blur drops from about half an em to zero, with no movement at all. Calm enough for hero images; filter costs more than opacity.

entrance · one-shot · fade

Slide In Blurred

Shoots in from the left as a squashed, stretched, blurred streak and snaps into a sharp box. Scale fakes the motion blur, and the origin on the right edge keeps it leading.

entrance · one-shot · slide · fade

Shake X

The error shake: the box jolts side to side in shrinking swings and settles in under a second. Play it on a wrong password or a failed form. Only translateX moves.

one-shot · attention

Heartbeat

A double beat, a small lub and a bigger dub, then a rest, looping like a pulse. Good for a like button, a live badge or a health stat. Each beat rises fast and eases back down.

loop · attention · zoom

Pulse

The element grows a little and shrinks back, over and over, like it is breathing fast. The plain pulse for a call to action or a new badge. One scale keyframe with a symmetric ease.

loop · attention · zoom

Bounce

Drops into three shrinking bounces like a rubber ball: it stretches as it falls, squashes flat on each landing and comes to rest. The pivot sits on the bottom edge so it squashes into the floor.

one-shot · attention · bounce

Head Shake

A 3D no: the box turns its face left and right on the vertical axis with a small sideways drift, fading out over a second. Softer than an error shake. Needs perspective() in the transform.

one-shot · attention · rotate

Tada

Shrinks back as if taking a breath, then grows and wags left and right like it is showing off. The classic reveal for a prize, an unlocked badge or a finished step. Scale and rotate together.

one-shot · attention · zoom

Rubber Band

Slowly pulled wide and flat, then let go: it snaps tall, overshoots and rings down to its shape. Fun on a button that was just tapped. Scale X and Y move in opposite directions.

one-shot · attention

Wobble

Slides left and right while tilting into each move, like a plate of jelly nudged across a table, and settles in a second. Each swing is smaller than the last. Translate and rotate together.

one-shot · attention · slide

Jello

The box jiggles like gelatin: it leans into a parallelogram one way, then the other, squishing slightly as it goes, and firms up. Built from skew() plus a little scale, no rotation.

one-shot · attention

Swing

Hangs from its top edge and swings like a sign on a nail, each arc smaller than the last until it hangs still. The transform-origin sits at the top center, so the bottom does the moving.

one-shot · attention · rotate

Flash

The element blinks out and back twice in quick succession, then stays lit. A classic way to point at something that just changed, like a new total or a saved field. Opacity only.

one-shot · attention · fade

Pop

A quick press and release: the element dips small, springs past full size and settles, all in half a second. Made for a tap on a like, a star or an add to cart button.

one-shot · attention · zoom

Head Nod

A 3D yes: the box tips its face down and back up twice, pivoting low like a head on a neck. Pair it with Head Shake for yes and no feedback. Uses rotateX inside perspective().

one-shot · attention · rotate

Ping

A copy of the shape swells out from behind the element and fades, like a radar blip or a live notification dot. The ring is a ::before behind the content, so the element itself never moves.

loop · attention · zoom · tailwind

Spin

Turns a full circle every second at constant speed, forever. The go-to for a refresh icon or a busy state. Linear timing and a single to keyframe, the same motion as Tailwind's animate-spin.

loop · rotate · tailwind

Float

Drifts up and down in a slow, even rhythm, and its shadow stays behind on the ground and softens as it rises. Good for hero art, app icons and empty states. Three second ease-in-out loop.

loop · attention

Bounce Up and Down

Falls fast, touches down and rises slowly, over and over, like a ball tapping the floor. The same curve as Tailwind's animate-bounce: an ease-in drop and an ease-out climb.

loop · bounce · tailwind

Jump

A cartoon jump every two seconds: it crouches, stretches tall on take off, squashes on landing and waits. Anticipation and a rest make it feel alive, not frantic. The pivot is the bottom edge.

loop · attention · bounce

Wiggle

A quick side to side rotation that dies out, then a long pause before the next one. The polite way to nudge someone toward a button without looping nonstop. Rotates around the center.

loop · attention · rotate

Vibrate

Two short buzzes and a pause, like a phone on a desk. The jitter is tiny, a fraction of an em with a degree of twist, so it reads as a vibration rather than a shake. Linear steps.

loop · attention

Bell Ring

A notification bell that rings in fast, shrinking swings from its top, with the clapper lagging the other way, then rests. The clapper pivots from a point above it via transform-box: fill-box.

loop · attention · rotate

Blink

Hard on, hard off, once a second, like a recording light or an old blink tag. steps(1) makes each switch instant instead of a fade. Keep it for small things: a live dot, a warning icon.

loop · attention · fade

Waving Hand

Waves hello from the wrist: a few big arcs from the bottom corner, then a rest before the next hello. Great next to a greeting in an onboarding screen. The transform-origin sits low and to the right.

loop · attention · rotate

Glow Pulse

A soft halo in the accent color swells around the element and fades back, like a light breathing. Draws the eye to a primary button without moving it. Animates box-shadow on a single element.

loop · attention

Breathe

A slow inhale, a short hold, a slow exhale and a pause, five seconds a cycle, growing brighter as it fills. Suits meditation timers, idle states and ambient backgrounds. Scale plus opacity.

loop · zoom · fade

Move Left to Right

Glides from side to side and leans into each move, easing to a stop at both ends. Two animations on the separate translate and rotate properties, so the lean peaks when the speed does.

loop · slide

Move in a Circle

Travels round a small circle at an even speed and stays upright the whole way. The trick is rotate, translate, then rotate back the same amount in one transform, so only the position turns.

loop · rotate

3D Flip Loop

Every couple of seconds the element flips a full turn around its vertical axis, fastest as it passes edge on, then lands flat and waits. perspective() in the transform gives it depth.

loop · flip · rotate

Blob Morph

The square melts into a slowly shifting blob, its corners swelling and shrinking on a six second loop. Nice behind an avatar or a hero image. Eight-value border-radius does all the shaping.

loop · attention

Shine

A glossy streak of light sweeps across the element every few seconds, like a reflection on glass. A classic for a premium badge or a sign up button. A gradient ::after slides under overflow: hidden.

loop · attention · slide

Hinge

Comes loose on one side, swings from its top left corner like a sign hanging off one nail, sways twice, then drops and fades. A transform-origin of 0 0 does all the pivoting.

exit · rotate · one-shot

Jack In The Box

Springs up out of nothing from its bottom edge, stretched tall and tilted, then wobbles left and right until it stands still. The pivot sits on the bottom center, like a toy on a spring.

entrance · zoom · rotate · one-shot

Fade In On Scroll

Fades and rises into place as it scrolls into view, with no JavaScript: animation-timeline: view() ties the keyframes to scroll. It also plays once on load, so browsers without it still animate.

scroll-triggered · entrance · fade · one-shot

Staggered List Entrance

List rows slide up and fade in one after another. Each row carries its index in a --i custom property and the delay is calc(var(--i) * 90ms), so adding rows needs no new CSS.

entrance · slide · fade · one-shot

Fade Out

The plain opacity exit, on an ease-in so it lingers a beat and then goes. It also ends on visibility: hidden, so the invisible element stops taking clicks and leaves the accessibility tree.

exit · fade · one-shot

Zoom Out

Shrinks toward its center on an ease-in cubic, holding full opacity for the first 40 percent and then fading as it gets small. The standard way to close a modal, a toast or a lightbox.

exit · zoom · fade · one-shot

Slide Out Right

Accelerates off to the right and fades on the way, like a dismissed notification or a swiped card. The ease-in curve keeps it readable at the start, and the distance is in em so it scales.

exit · slide · one-shot

Bounce Out

Squeezes in, puffs up past full size, holds for a breath, then collapses and fades. The swell before the drop is what makes it read as springy. Each leg has its own timing function.

exit · bounce · zoom · one-shot

Back Out Down

Steps back first, shrinking to 75 percent and dimming, then drops away and fades. The drop uses an ease-in back curve, so it lifts a hair before it falls, like something let go.

exit · zoom · slide · one-shot

Flip Out X

Tips toward you a little, then flips away around its horizontal axis until it is edge on and gone. perspective() sits inside the transform, so the 3D works without a wrapper.

exit · flip · fade · one-shot

Puff Out

Swells, blurs and dissolves like a puff of smoke, most of it in the first few frames on an ease-out quart. Scale, blur and opacity together; filter costs more, so keep it for single elements.

exit · zoom · fade · one-shot

Rotate Out

Winds back a few degrees, then spins 200 degrees clockwise and fades as it picks up speed. The small wind-up tells the eye which way it is about to go. Rotates around its center.

exit · rotate · fade · one-shot

Scale Up On Scroll

Grows from 60 percent and fades in as it enters the viewport, driven by scroll through a view() timeline. The load-time copy lands with a small overshoot; scrolling back shrinks it again.

scroll-triggered · entrance · zoom · one-shot

Slide In On Scroll

Slides in from the left as it scrolls into view and slides back out if you scroll up again. animation-range: entry 0% cover 40% decides where the motion starts and ends on the page.

scroll-triggered · entrance · slide · one-shot

Blur In On Scroll

Comes into focus as it scrolls into view: a filter blur drops to zero while it fades in and rises a little. Striking on hero images and section titles; filter is heavier than opacity.

scroll-triggered · entrance · fade · one-shot

Rotate In On Scroll

Starts tilted and low, then straightens and rises into place as it scrolls into view, the way card grids settle on landing pages. A view() timeline scrubs a translate and rotate.

scroll-triggered · entrance · rotate · one-shot

Reveal Up On Scroll

Wipes into view from the bottom edge up as it scrolls in, with a clip-path inset that shrinks from 100 percent. Negative insets at the end leave room for the shadow, so nothing gets cut off.

scroll-triggered · entrance · slide · one-shot

Staggered Grid Animation

A three by three grid pops in along the diagonal, each tile overshooting and settling. Every tile's --i is its row plus its column, so tiles on the same diagonal land together.

entrance · zoom · bounce · one-shot

3D Cube Rotate

A four sided cube rolls forward a face at a time and pauses on each one, so it can cycle words, stats or logos. Faces sit at rotateX(90deg times --i) and translateZ half the cube.

loop · rotate · flip

3D Carousel

Six cards stand in a ring and the ring turns one card at a time, pausing on each. Each card is rotateY(60deg times --i) then pushed out with translateZ; the ring itself is the only thing animated.

loop · rotate

Figure Eight Animation

A dot with a two-dot trail loops an infinity track. Two nested ease-in-out sine swings, one sideways and one twice as fast up and down, trace the curve with no path data at all.

loop · slide

Square to Circle Morph

Rounds off into a circle while it turns half a revolution, holds, then squares up again on the way round. border-radius interpolates happily from an em value to 50 percent, so one property does it.

loop · rotate · zoom

Sprite Sheet Animation

A walk cycle played frame by frame: an eight frame strip slides behind a window with steps(8), so it jumps a whole frame at a time. The ground scrolls smoothly underneath for contrast.

loop · slide

Elastic Spring Animation

Grows with a real spring: it overshoots, wobbles and settles, then springs back down. The easing is linear() with 31 stops sampled from a damped spring; older browsers fall back to a back-out curve.

loop · zoom · bounce

Ken Burns Effect

The documentary move: a slow push in and drift across a still picture, then back out. The image scales and translates inside an overflow: hidden frame, so the frame never moves.

loop · zoom · slide

Circle Reveal

Opens like a camera iris: a clip-path circle grows from the center until the whole element shows, while the label inside settles from a slight zoom. The end radius is wide enough to keep the shadow.

entrance · zoom · one-shot

SVG Line Draw Animation

A success check draws itself: first the circle, then the tick. A pathLength of 1 on each shape means a dash of 1 always fits, so the same keyframes draw any path whatever its length.

entrance · one-shot

Card Stack Shuffle

The top card of a stack slides out and tucks in behind while the rest move up a place and brighten, on repeat. One keyframe set plays on every card, a third of a cycle apart through negative delays.

loop · slide · rotate

Page Flip Animation

A page lifts off the right of an open book and turns over to the left, on repeat. The leaf pivots on its left edge with rotateY, and its two faces are pseudo-elements with backface-visibility: hidden.

loop · flip · rotate

Rolling Square

A square tips over its front corner four times across the floor, fading in and out at the ends. Each roll resets to 0 while a steps(4) translate hops it one square on, so the loop never jumps.

loop · rotate · slide

How to use these keyframe animations

Open any animation, copy the @keyframes block and the class into your stylesheet, then add the class to the element you want to move: a card, an image, a modal, an icon. The demo box is only there to show the motion.

Entrances and one-shot effects play once when the class is applied, so add the class when the element appears, or toggle it to replay. Change animation-duration, animation-delay and animation-iteration-count on the class to taste; the keyframes stay the same.

Distances are in em, so the motion scales with --kfa-size or the element's font size. Every snippet ships with a prefers-reduced-motion rule that skips to the end state for people who asked their OS for less motion.

Frequently asked questions

What is a CSS keyframe animation?

A named @keyframes rule describes the steps, and the animation property plays them on an element with a duration, easing, delay and repeat count.

How do I make an element fade in with CSS?

Animate opacity from 0 to 1, optionally with a small translate, and set animation-fill-mode: both so the element doesn't flash before the animation starts. The fade entries above are ready to paste.

How do I delay, repeat or keep the last frame of an animation?

Use animation-delay, animation-iteration-count (a number or infinite) and animation-fill-mode: forwards to hold the final frame.

Can I trigger an animation on scroll without JavaScript?

Yes, in browsers with scroll-driven animations: animation-timeline: view() plays the keyframes as the element scrolls into view. Elsewhere the element simply shows its end state. Entries tagged "scroll-triggered" include it.

Should I use a CSS animation or a transition?

Transitions animate between two states when something changes, like a hover or a class. Keyframe animations run on their own, can loop, and can have as many steps as you like.