# 100 Cards CSS animations

Entry, ambient, hover, 3D and choreography effects for cards and containers. Bundle: 7.5 KB gzip (39.6 KB minified).

```js
import "@salkomdesignstudio/sds-motion-forge/categories/cards";
```

- [Accordion In](https://sds-motion-forge.netlify.app/animations/card-accordion-in/) — `.sds-card-accordion-in` — Children unfold sequentially from scaleY(0) at the top — like opening accordion panels
- [Aurora](https://sds-motion-forge.netlify.app/animations/card-aurora/) — `.sds-card-aurora` — Aurora — card animation
- [Bloom](https://sds-motion-forge.netlify.app/animations/card-bloom/) — `.sds-card-bloom` — Bloom — card animation
- [Border Beam](https://sds-motion-forge.netlify.app/animations/card-border-beam/) — `.sds-card-border-beam` — Single light bead orbits the card border continuously via CSS Motion Path (offset-path: border-box)
- [Border Tide](https://sds-motion-forge.netlify.app/animations/card-border-tide/) — `.sds-card-border-tide` — Twin light beads 180° apart chase each other around the border — tidal wave pattern
- [Bounce In](https://sds-motion-forge.netlify.app/animations/card-bounce-in/) — `.sds-card-bounce-in` — Entrance from below with spring overshoot — 5-stage oscillation settles at rest
- [Breath](https://sds-motion-forge.netlify.app/animations/card-breath/) — `.sds-card-breath` — Breath — card animation
- [Burst](https://sds-motion-forge.netlify.app/animations/card-burst/) — `.sds-card-burst` — Burst — card animation
- [Carousel Step](https://sds-motion-forge.netlify.app/animations/card-carousel-step/) — `.sds-card-carousel-step` — Cycles through four yaw poses (0°, −30°, −60°, −90°) with held pauses — mimics a rotating carousel
- [Cascade](https://sds-motion-forge.netlify.app/animations/card-cascade/) — `.sds-card-cascade` — Cascade — card animation
- [Checker](https://sds-motion-forge.netlify.app/animations/card-checker/) — `.sds-card-checker` — Four quadrant children scale in as two alternating diagonal pairs. Requires 4 child elements
- [Cinematic Reveal](https://sds-motion-forge.netlify.app/animations/card-cinematic/) — `.sds-card-cinematic` — Wipes open from center via clip-path
- [Content Flood](https://sds-motion-forge.netlify.app/animations/card-content-flood/) — `.sds-card-content-flood` — Diagonal clip-path floods from the top-left corner, filling the card in two sweeping phases
- [Corner Charge](https://sds-motion-forge.netlify.app/animations/card-corner-charge/) — `.sds-card-corner-charge` — Diagonal corner pairs (top-right + bottom-left) flash in alternating rhythm — energy charge effect
- [Crystal Pulse](https://sds-motion-forge.netlify.app/animations/card-crystal-pulse/) — `.sds-card-crystal-pulse` — Brightness + contrast + scale pulse — card catches light like a crystal facet
- [Curtain Fall](https://sds-motion-forge.netlify.app/animations/card-curtain-fall/) — `.sds-card-curtain-fall` — A dark curtain drops from above, holds, then retracts to reveal the card — theatre-stage entrance
- [Deal Arc](https://sds-motion-forge.netlify.app/animations/card-deal-arc/) — `.sds-card-deal-arc` — Entrance: card arcs in from upper-left with −18° rotation — classic card-deal motion
- [Deck Cycle](https://sds-motion-forge.netlify.app/animations/card-deck-cycle/) — `.sds-card-deck-cycle` — Perspective yaw cycle — card tips 22° and returns, mimicking thumbing through a deck
- [Deck Peek](https://sds-motion-forge.netlify.app/animations/card-deck-peek/) — `.sds-card-deck-peek` — Two ghost cards peek from behind the main card with staggered offset-rotate on a loop
- [Deep Float](https://sds-motion-forge.netlify.app/animations/card-deep-float/) — `.sds-card-deep-float` — Deep Float — card animation
- [Depth](https://sds-motion-forge.netlify.app/animations/card-depth/) — `.sds-card-depth` — Depth — card animation
- [Diagonal Wipe](https://sds-motion-forge.netlify.app/animations/card-diagonal-wipe/) — `.sds-card-diagonal-wipe` — Polygon clip sweeps diagonally from left; a 2 px brightness seam rides the clip edge at reveal
- [Dive](https://sds-motion-forge.netlify.app/animations/card-dive/) — `.sds-card-dive` — Entrance from overhead: rotateX 65° + upward translate, blur clears on two-stage deceleration brake
- [Door Peek](https://sds-motion-forge.netlify.app/animations/card-door-peek/) — `.sds-card-door-peek` — Card pivots open −18° on its left hinge, holds, then swings shut — like a door ajar
- [Drift](https://sds-motion-forge.netlify.app/animations/card-drift/) — `.sds-card-drift` — Drift — card animation
- [Edge Scan](https://sds-motion-forge.netlify.app/animations/card-edge-scan/) — `.sds-card-edge-scan` — Gloss scan line sweeps across top then bottom edge in sequence — scanner/lidar aesthetic
- [Elastic Drop](https://sds-motion-forge.netlify.app/animations/card-elastic-drop/) — `.sds-card-elastic-drop` — Drops from 55 px above with 3-cycle scaleY oscillation — bungee-cord physics
- [Electric](https://sds-motion-forge.netlify.app/animations/card-electric/) — `.sds-card-electric` — Electric — card animation
- [Expand](https://sds-motion-forge.netlify.app/animations/card-expand/) — `.sds-card-expand` — Expand — card animation
- [Fan Spread](https://sds-motion-forge.netlify.app/animations/card-fan-spread/) — `.sds-card-fan-spread` — Children rotate out from their shared bottom-left corner with stagger — playing-card fan open
- [Flip](https://sds-motion-forge.netlify.app/animations/card-flip/) — `.sds-card-flip` — Flip — card animation
- [Flip Loop](https://sds-motion-forge.netlify.app/animations/card-flip-loop/) — `.sds-card-flip-loop` — Full 360° Y-axis rotation; brightness dips to 35% at the 90° and 270° edges, elastic overshoot on landing
- [Flip Reveal](https://sds-motion-forge.netlify.app/animations/card-flip-reveal/) — `.sds-card-flip-reveal` — Flip Reveal — card animation
- [Ambient Float](https://sds-motion-forge.netlify.app/animations/card-float/) — `.sds-card-float` — Gentle floating with shadow growth
- [Float Gimbal](https://sds-motion-forge.netlify.app/animations/card-float-gimbal/) — `.sds-card-float-gimbal` — Gentle levitation loop with micro counter-rotations on both axes — stabiliser-gimbal quality
- [Fold](https://sds-motion-forge.netlify.app/animations/card-fold/) — `.sds-card-fold` — Fold — card animation
- [Force](https://sds-motion-forge.netlify.app/animations/card-force/) — `.sds-card-force` — Force — card animation
- [Frame Breathe](https://sds-motion-forge.netlify.app/animations/card-frame-breathe/) — `.sds-card-frame-breathe` — The card's border ring pulses opacity and blur in a slow 2.4 s breath cycle
- [Frame Draw](https://sds-motion-forge.netlify.app/animations/card-frame-draw/) — `.sds-card-frame-draw` — The card's border ring is drawn in left to right via clip-path — drawn-on feel
- [Free Fall](https://sds-motion-forge.netlify.app/animations/card-free-fall/) — `.sds-card-free-fall` — Gravity-curve fall from 64 px above; blur clears on a two-stage deceleration
- [Glass](https://sds-motion-forge.netlify.app/animations/card-glass/) — `.sds-card-glass` — Glass — card animation
- [Glass Frost](https://sds-motion-forge.netlify.app/animations/card-glass-frost/) — `.sds-card-glass-frost` — Blur + brightness frost cycle — card appears to ice over and clear on a 3.5 s loop
- [Glass Wipe](https://sds-motion-forge.netlify.app/animations/card-glass-wipe/) — `.sds-card-glass-wipe` — Frosted-glass strip (blurred translucent slab) sweeps across the card with a skew
- [Glitch](https://sds-motion-forge.netlify.app/animations/card-glitch/) — `.sds-card-glitch` — Glitch — card animation
- [Glow Surge](https://sds-motion-forge.netlify.app/animations/card-glow/) — `.sds-card-glow` — Breathing outer glow on a card
- [Gravity](https://sds-motion-forge.netlify.app/animations/card-gravity/) — `.sds-card-gravity` — Gravity — card animation
- [Holographic Tilt](https://sds-motion-forge.netlify.app/animations/card-holo/) — `.sds-card-holo` — Rotates on X/Y with hue shift effect
- [Hue Shift](https://sds-motion-forge.netlify.app/animations/card-hue-shift/) — `.sds-card-hue-shift` — Full 360° hue-rotate sweep — prismatic rainbow wash cycling through the card
- [Idle Bob](https://sds-motion-forge.netlify.app/animations/card-idle-bob/) — `.sds-card-idle-bob` — Gentle 8 px vertical float — calm levitation ambient
- [Idle Breathe](https://sds-motion-forge.netlify.app/animations/card-idle-breathe/) — `.sds-card-idle-breathe` — Micro scale pulse 1 → 1.018 — barely perceptible ambient breath
- [Idle Glow](https://sds-motion-forge.netlify.app/animations/card-idle-glow/) — `.sds-card-idle-glow` — Drop-shadow glow breathes in and out on a 2.8 s loop
- [Idle Pulse](https://sds-motion-forge.netlify.app/animations/card-idle-pulse/) — `.sds-card-idle-pulse` — Scale + opacity pulse — subtle attention-seeking ambient loop
- [Idle Rock](https://sds-motion-forge.netlify.app/animations/card-idle-rock/) — `.sds-card-idle-rock` — ±2° rotation rock — gentle pendulum ambient on a 3.5 s loop
- [Idle Sway](https://sds-motion-forge.netlify.app/animations/card-idle-sway/) — `.sds-card-idle-sway` — Slow ±6 px lateral sway on a 4 s ease-in-out loop
- [Ink](https://sds-motion-forge.netlify.app/animations/card-ink/) — `.sds-card-ink` — Ink — card animation
- [Iris](https://sds-motion-forge.netlify.app/animations/card-iris/) — `.sds-card-iris` — Iris — card animation
- [Iris Bloom](https://sds-motion-forge.netlify.app/animations/card-iris-bloom/) — `.sds-card-iris-bloom` — Iris opens from an off-centre point with a brightness flare at full aperture, then settles
- [Layers](https://sds-motion-forge.netlify.app/animations/card-layers/) — `.sds-card-layers` — Children bob at staggered amplitudes (5 px → 13 px) for a parallax depth illusion. Requires child elements
- [Lens Bulge](https://sds-motion-forge.netlify.app/animations/card-lens-bulge/) — `.sds-card-lens-bulge` — Subtle scale + perspective pulse that mimics a magnifying lens swelling and receding
- [Letterbox](https://sds-motion-forge.netlify.app/animations/card-letterbox/) — `.sds-card-letterbox` — Cinematic black bars part vertically while card content scales 1.04 → 1
- [Levitate](https://sds-motion-forge.netlify.app/animations/card-levitate/) — `.sds-card-levitate` — Levitate — card animation
- [Liquid Border](https://sds-motion-forge.netlify.app/animations/card-liquid-border/) — `.sds-card-liquid-border` — Liquid Border — card animation
- [Magnetic Hover](https://sds-motion-forge.netlify.app/animations/card-magnetic/) — `.sds-card-magnetic` — Lifts and rotates slightly in a float
- [Momentum](https://sds-motion-forge.netlify.app/animations/card-momentum/) — `.sds-card-momentum` — Momentum — card animation
- [Morph](https://sds-motion-forge.netlify.app/animations/card-morph/) — `.sds-card-morph` — Morph — card animation
- [Neon](https://sds-motion-forge.netlify.app/animations/card-neon/) — `.sds-card-neon` — Neon — card animation
- [Neon Border](https://sds-motion-forge.netlify.app/animations/card-neon-border/) — `.sds-card-neon-border` — Neon Border — card animation
- [Parallax Depth](https://sds-motion-forge.netlify.app/animations/card-parallax/) — `.sds-card-parallax` — Perspective rotateX with Z push
- [Pinball](https://sds-motion-forge.netlify.app/animations/card-pinball/) — `.sds-card-pinball` — Enters with 4 direction changes and rotation damping — pinball ricochet physics
- [Depth Portal](https://sds-motion-forge.netlify.app/animations/card-portal/) — `.sds-card-portal` — Flies in from deep Z perspective
- [Prism](https://sds-motion-forge.netlify.app/animations/card-prism/) — `.sds-card-prism` — Prism — card animation
- [Refract Slide](https://sds-motion-forge.netlify.app/animations/card-refract-slide/) — `.sds-card-refract-slide` — Diagonal caustic-light beam (blurred 135° gradient) slides across the card surface
- [Reveal Stack](https://sds-motion-forge.netlify.app/animations/card-reveal-stack/) — `.sds-card-reveal-stack` — Children slide up from beneath with 100 ms stagger — like cards fanning out of a deck
- [Rise](https://sds-motion-forge.netlify.app/animations/card-rise/) — `.sds-card-rise` — Rise — card animation
- [Rotate](https://sds-motion-forge.netlify.app/animations/card-rotate/) — `.sds-card-rotate` — Rotate — card animation
- [Rubber Band](https://sds-motion-forge.netlify.app/animations/card-rubber-band/) — `.sds-card-rubber-band` — ScaleX/scaleY squeeze-stretch alternation — rubber-band snap entrance
- [Scan](https://sds-motion-forge.netlify.app/animations/card-scan/) — `.sds-card-scan` — Scan — card animation
- [Shadow Lift](https://sds-motion-forge.netlify.app/animations/card-shadow-lift/) — `.sds-card-shadow-lift` — Shadow Lift — card animation
- [Refraction Shimmer](https://sds-motion-forge.netlify.app/animations/card-shimmer/) — `.sds-card-shimmer` — Diagonal shimmer background cycles
- [Shuffle Deal](https://sds-motion-forge.netlify.app/animations/card-shuffle-deal/) — `.sds-card-shuffle-deal` — Entrance: card is dealt from upper-left with a diagonal translate and −14° rotation
- [Shutter](https://sds-motion-forge.netlify.app/animations/card-shutter/) — `.sds-card-shutter` — Five stepped horizontal reveals — mechanical shutter feel via steps(5) clip-path inset
- [Slice Up](https://sds-motion-forge.netlify.app/animations/card-slice/) — `.sds-card-slice` — Children slice up in sequence
- [Slingshot](https://sds-motion-forge.netlify.app/animations/card-slingshot/) — `.sds-card-slingshot` — Launched from lower-left on a diagonal arc with deceleration overshoot and settle
- [Smoke](https://sds-motion-forge.netlify.app/animations/card-smoke/) — `.sds-card-smoke` — Smoke — card animation
- [Snap](https://sds-motion-forge.netlify.app/animations/card-snap/) — `.sds-card-snap` — Snap — card animation
- [Snap Back](https://sds-motion-forge.netlify.app/animations/card-snap-back/) — `.sds-card-snap-back` — Overshoots right, snaps back left with rotation settle — stretched-elastic return
- [Spiral Reveal](https://sds-motion-forge.netlify.app/animations/card-spiral-reveal/) — `.sds-card-spiral-reveal` — Radar wedge sweeps 360° clockwise from 12 o'clock, revealing the card as it goes
- [Spotlight](https://sds-motion-forge.netlify.app/animations/card-spotlight/) — `.sds-card-spotlight` — Spotlight — card animation
- [Spring](https://sds-motion-forge.netlify.app/animations/card-spring/) — `.sds-card-spring` — Spring — card animation
- [Stack Drop](https://sds-motion-forge.netlify.app/animations/card-stack-drop/) — `.sds-card-stack-drop` — Entrance: card drops from 38 px above with a two-stage deceleration brake
- [Stack Pop](https://sds-motion-forge.netlify.app/animations/card-stack-pop/) — `.sds-card-stack-pop` — Card lifts from its stack with rising translateY and a growing drop-shadow on a 2.2 s loop
- [Stagger](https://sds-motion-forge.netlify.app/animations/card-stagger/) — `.sds-card-stagger` — Stagger — card animation
- [Tear](https://sds-motion-forge.netlify.app/animations/card-tear/) — `.sds-card-tear` — Jagged clip-path rips diagonally from the top-left corner with a paper-curl rotate
- [Tilt](https://sds-motion-forge.netlify.app/animations/card-tilt/) — `.sds-card-tilt` — Tilt — card animation
- [Tilt Orbit](https://sds-motion-forge.netlify.app/animations/card-tilt-orbit/) — `.sds-card-tilt-orbit` — Slow elliptical perspective lean — phase-shifted rotateX/rotateY on a 6 s loop, drop-shadow traces the tilt
- [Unfold](https://sds-motion-forge.netlify.app/animations/card-unfold/) — `.sds-card-unfold` — Unfold — card animation
- [Unpack](https://sds-motion-forge.netlify.app/animations/card-unpack/) — `.sds-card-unpack` — Card spring-expands from a compressed scaleY(0.25) / rotateX state — box-opening effect
- [Vortex](https://sds-motion-forge.netlify.app/animations/card-vortex/) — `.sds-card-vortex` — Vortex — card animation
- [Warp Gate](https://sds-motion-forge.netlify.app/animations/card-warp/) — `.sds-card-warp` — Rotates in from -90° on the Y axis
- [Wave](https://sds-motion-forge.netlify.app/animations/card-wave/) — `.sds-card-wave` — Wave — card animation