CSS Animation & Effects

A CSS motion lab: 36 effects — pulse, loaders, hover, carousel, glass, neon — redrawn on canvas with hover readouts and formulas.

Tech: Canvas 2D, easing, keyframes, clip-path

• Keyframes & Gradient Text — Load Animations, The transition curve contrasts with the fluid gradient text.
• Glassmorphism — This post is part of our special coverage Global Voices 2011.
• 3D Flip & Tilt Cards — perspective + rotateX / Y's 3D card.
• Scroll-driven Animation — Animation-timeline: view(), retreating from international service if not supported.
• Pulse Rings — Modemable cycle, Color and size CSS Variation Ring.
• Loaders — Pure CSS Load Animation: Ring / Lattice / Articles, etc.
• Hover Effects — Card suspension feedback package.
• Flowing Gradient — Multicolour gradient background flow.
• Easing Curves — CSS comparison-timing-finance.
• Spring Motion — Approximate spring / The echo effect.
• Staggered Entrance — Cross-entry: The sub-elements appear in sequence, each with a small delay over the previous one.
• FLIP Layout — First-Last-Invert-Play layout animation.
• Clip-path — crip- Tangible / Transform.
• 3D Transform — Perspective 3D transformation.
• Transition Properties — CSS conversion attribute.
• Parallax — Multiple layers follow the compass at different speeds, near and slow, simulate CSS vision.
• Filter Animation — animated filter。
• Blend Modes — Mixed mode: two layers of top and bottom colour by formulae (e.g Fragmented = Up×Down Alternatively, get a new color.
• Skeleton Screen — Skeleton loading。
• Progress Bar — Linear, Ring, Half circle, Water wave fill.
• Ripple — Water ripples: a circle appears at the point of impact, and the radius continues to grow, Transparency gets smaller, like the surface.
• Accordion — Light a piece, High degree of transition.
• Modal In / Out — Modal enter/exit。
• Carousel — Rotation: A set of cards is drawn horizontally, smoothing by time or click to the next one.
• Reveal — Erase, The blinds, Round diffusion, Diagonal, Pixels, Fuzzy and clear.
• Neon — Multilayer Shadow Simulation Text-shadow / Box-shadow neon.
• Liquid — Blob side, Drop of water, At the bottom of the wave, sticky stretches when suspended.
• Marquee — Horizontal Text, Double, The emblem, 1.15 p Operations.
• Ken Burns — Picture slow scaling.
• Shake Feedback — Left and right, The top and bottom of sth, Rotate, Elasticity, Heartbeat, Vibrator bar.
• Keyframe Sequence — Complicated @keyframes.
• Neumorphism — as the shadows rise / Dimple button sense.
• Custom Cursor — Custom cursor rings follow a pointer (or an automatic cruise) with dragtails.
• Animated Text Stroke — Text scrutinizing along the path (stroke-dashoffset sense), which flows in vain.
• Border Beam — The beam rotates along a rectangle frame, often in high-light cards.
• Spotlight Follow — Turns out there's a light on the screen that follows the Associated Pointer and lights out the cards below.