Category · sds-card-*

100 Cards CSS animations

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

Import only this category

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

Or use the CDN: https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/categories/cards.min.css. Core (tokens, modifiers, reduced-motion) is already inside each category bundle; to use two or more categories, load the full https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/motion.min.css instead.

All 100 cards animations

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

Browse all categories · Installation & usage docs