Brief
01 · MOVEMENT ANIMATIONS
| ANIMATION | DEMO | PROPERTY |
|---|---|---|
| Spin (Z) | rotate(360deg) | |
| Spin (Y axis) | rotateY(360deg) | |
| Spin (X axis) | rotateX(360deg) | |
| Pulse / Scale | scale(1→1.15) | |
| Bounce | translateY | |
| Float | translateY subtle | |
| Shake / Vibrate | translateX ± | |
| Wave (emoji) | 🤚 | rotate ±12deg |
| Swing | 🎵 | pendulum rotate |
| Rubber Band | scaleX/Y stretch | |
| Jello | skewX + skewY | |
| Heartbeat | ❤ | double-pulse scale |
| Morphing shape | border-radius anim | |
| Organic morph | border-radius blob | |
| Sway (plant) | 🌿 | transform-origin btm |
| Orbit | rotate+translateX |
02 · TEXT EFFECTS
| EFFECT | DEMO | TECHNIQUE |
|---|---|---|
| Neon glow | NEON | text-shadow layers |
| Rainbow cycle | RAINBOW | color keyframes |
| Glitch | GLITCH | ::before/after clip-path |
| Typewriter | hello world__ | width steps(n) |
| Gradient text | GRADIENT | background-clip:text |
| Shadow pulse | SHADOW | drop-shadow filter |
| Cursive float | Cursive | Dancing Script font |
| 3D text | 3D TEXT | layered text-shadow |
| Outline only | OUTLINE | -webkit-text-stroke |
| Shimmer | SHIMMER EFFECT | moving bg-clip:text |
03 · BACKGROUNDS & GRADIENTS
| TYPE | DEMO | TECHNIQUE |
|---|---|---|
| Animated gradient | background-size 400% | |
| Conic gradient spin | conic-gradient + spin | |
| Rainbow bg cycle | background color anim | |
| Animated stripes | repeating-linear | |
| Dot pattern | radial-gradient repeat | |
| Checkerboard hue | conic + hue-rotate | |
| Glassmorphism | GLASS | backdrop-filter blur |
| Mesh gradient | multi radial-gradient | |
| Holographic sheen | layered ::after shimmer |
04 · BORDER EFFECTS
| EFFECT | DEMO | TECHNIQUE |
|---|---|---|
| Color pulse | border | border-color keyframe |
| Neon glow border | neon | box-shadow inner+outer |
| Rainbow gradient | gradient | border-box bg-clip |
| Dashed spin | dashed | dashed + rotate anim |
| Underline expand | hover line | ::after width 0→100% |
| Double border | double | border-style: double |
05 · 3D TRANSFORMS
| EFFECT | DEMO | TECHNIQUE |
|---|---|---|
| 3D Cube | F B L R T D | preserve-3d faces |
| Card flip Y | CARD | rotateY + perspective |
| Flip X axis | ✦ | perspective rotateX |
| Tilt shake | rotate ±2deg | |
| Counter-spin rings | rotate + counter-rotate |
06 · CSS FILTERS & VISUAL FX
| FILTER | DEMO | VALUE |
|---|---|---|
| hue-rotate() | 0deg → 360deg | |
| blur() pulse | blur(0→2px) | |
| saturate() | saturate(2) | |
| invert(1) | filter: invert(1) | |
| sepia() | sepia(0.8) | |
| Glassmorphism | backdrop-filter blur+sat | |
| drop-shadow() | filter drop-shadow | |
| contrast() | contrast(2) | |
| brightness() | brightness(1.5) |
07 · HOVER EFFECTS (try them!)
| EFFECT | DEMO | TRANSITION |
|---|---|---|
| Grow | hover | scale(1.2) |
| Shrink | hover | scale(0.85) |
| Lift + shadow | hover | translateY(-5px) |
| Neon glow | hover | box-shadow spread |
| Bg color swap | hover | background-color |
| Slide fill | ::before left:-100→0 | |
| Rotate | hover | rotate(10deg) |
| Border reveal | hover | border-color anim |
| Ripple (click) | click me | ::after scale ripple |
| Skew | hover | skewX(-10deg) |
| 3D flip | hover | perspective rotateY |
08 · LOADERS & PROGRESS
| TYPE | DEMO | TECHNIQUE |
|---|---|---|
| Spinner single | border-top spin | |
| Spinner dual | 2-color border | |
| Spinner triple | border-top+right | |
| Pulse ring | ::before ping scale | |
| Bouncing dots | nth-child delay | |
| Sound bars | height bounce stagger | |
| Progress bar | width 0→var(--w) | |
| Striped progress | repeating-linear move | |
| Glow progress | box-shadow glow |
09 · CLIP-PATH SHAPES & REVEALS
| SHAPE | DEMO | CLIP-PATH |
|---|---|---|
| Wipe reveal (→) | inset(0 100% 0 0→0) | |
| Reveal up (↑) | inset(100% 0 0 0→0) | |
| Circle | circle(50%) | |
| Hexagon spin | polygon(6 pts) | |
| Star burst | polygon(10 pts) | |
| Arrow shape | polygon(arrow) | |
| Diamond spin | polygon(4 pts) | |
| Chevron | polygon(notch) |
10 · PSEUDO-ELEMENTS, MISC & LAYOUT
| FEATURE | DEMO | TECHNIQUE |
|---|---|---|
| ::before arrow | list item | ::before content pulse |
| ::after badge | item | ::after abs position |
| ::after underline | animated line | ::after width keyframe |
| CSS counters | one two three | counter-increment |
| fadeInUp | fade + rise | opacity + translateY |
| will-change hint | will-change:transform | |
| Stagger delay | animation-delay n×0.2s | |
| fill-mode: both | animation-fill-mode | |
| direction: alternate | animation-direction | |
| Marquee ticker | CSS ANIMATION· TRANSFORMS ·FILTERS· GRADIENTS ·CSS ANIMATION· TRANSFORMS ·FILTERS· GRADIENTS · | translateX ticker loop |
✦ 10 SECTIONS · 80+ FEATURES · PURE CSS ✦
Design
