150+ CSS & JS animations. Scroll to explore, hover to interact, click to toggle. Each card shows the technique used.
Opacity transitions ā the foundation of smooth UI
opacity: 0 ā 1\ntransition: opacity 0.6s easeopacity: 0 ā 1\ntranslateY: 30px ā 0\ntransition: 0.6s ease-outopacity: 0 ā 1\ntranslateY: -30px ā 0\ntransition: 0.6s ease-outopacity: 0 ā 1\ntranslateX: -40px ā 0\ntransition: 0.6s ease-outopacity: 0 ā 1\ntranslateX: 40px ā 0\ntransition: 0.6s ease-outopacity: 0 ā 1\nscale: 0.8 ā 1\ntransition: 0.6s ease-outHover over the elements to see scale animations
transform: scale(1.15)\ntransition: 0.3s easetransform: scale(0.85)\ntransition: 0.3s easescale(1.1) + box-shadow\ntransition: 0.3s easescale(1.15)\ntransition: cubic-bezier(0.34, 1.56, 0.64, 1)scaleX(1.1) scaleY(0.9)\ntransition: 0.3s easerotateY(180deg)\ntransition: 0.6s ease\nperspective: 600pxContinuous and triggered rotation effects
@keyframes spin\n rotate(0 ā 360deg)\n animation: 2s linear infinite@keyframes spin\n rotate(360 ā 0deg)\n animation: 3s linear infinite@keyframes swing\n rotate(-15 ā 15deg)\n animation: 1s ease-in-out infinite@keyframes wobble\n translateX + rotate\n animation: 1s ease-in-out infinite@keyframes rotateX\n rotateX(0 ā 360deg)\n perspective: 600px@keyframes rotateY\n rotateY(0 ā 360deg)\n perspective: 600pxElements sliding into view on scroll
translateX: -100% ā 0\ntransition: 0.7s ease-outtranslateX: 100% ā 0\ntransition: 0.7s ease-outtranslateY: -100% ā 0\ntransition: 0.7s ease-outtranslateY: 100% ā 0\ntransition: 0.7s ease-outtranslateX(-80px) rotate(-10deg) ā 0\ntransition: 0.8s ease-outtranslateX(-100%) ā 0\ncubic-bezier(0.68, -0.55, 0.265, 1.55)Playful bouncing and spring physics effects
@keyframes bounce\n translateY(0 ā -20px)\n ease-in-out infinite@keyframes bounce\n cubic-bezier timing\n realistic gravity feel@keyframes jello\n skewX + skewY oscillation\n animation: 2s infinite@keyframes rubberband\n scaleX/scaleY oscillation\n elastic stretch effect@keyframes heartbeat\n scale(1 ā 1.3) double pulse\n animation: 1.5s infinite@keyframes float\n translateY + slight rotate\n gentle floating motionAttention-grabbing pulsing and glowing effects
@keyframes pulse\n scale(1 ā 1.05)\n opacity oscillation@keyframes ping\n scale(1 ā 2), opacity(1 ā 0)\n notification-style ring@keyframes glow\n box-shadow oscillation\n neon glow effect@keyframes glow\n box-shadow: 5px ā 60px spread\n green neon glow@keyframes glow\n box-shadow: 5px ā 80px spread\n intense pink glow@keyframes shimmer\n background-position sweep\n loading skeleton effectTypography effects and text reveals
setInterval letter by letter\n+ blinking cursor\nclassic typewriter effectusers
Animated number counter\n0 ā target over 2s\ntabular-nums for alignmentbackground: linear-gradient\nbackground-clip: text\nanimated background-positionper-character translateY\nstaggered animation-delay\nwave motion effectfilter: blur(10px) ā blur(0)\nopacity: 0 ā 1\nanimation: 0.8s ease-outclip-path: inset(0 100% 0 0)\nā inset(0 0 0 0)\ncurtain reveal effectLoading indicators and progress animations
border: 3px solid\nborder-top-color: transparent\nanimation: spin 0.8s linear infinite3 dots with scale(0 ā 1)\nstaggered animation-delay\nclassic loading patternscaleX: 0 ā 1 ā 0\ntransform-origin switch\nsliding bar loaderrotate(0 ā 360deg)\ntranslateX for radius\ncounter-rotate to stay upright@keyframes morph\nborder-radius transitions\n+ rotation for organic feelstroke-dashoffset animation\n+ rotation\nsmooth arc spinnerInteractive hover animations for buttons and cards
translateY(-3px)\nbox-shadow increase\ntransition: 0.3s easebox-shadow glow on hover\nborder-color transition\nsubtle to vividbackground-size: 0% ā 100%\nor pseudo-element width\nleft-to-right fillrotateX + rotateY on hover\nperspective: 800px\n3D card tilt effectrotate(360deg) on hover\ncolor transition\ninteractive icon feedbackSequential animations with staggered delays
// Stagger delay: each item gets i * 100ms
transitionDelay: `${index * 0.1}s`// Cascade: translateX(-60px) ā 0
// Progress bars animate after items appear// Scale pop: scale(0) ā scale(1)
// Bounce easing: cubic-bezier(0.34, 1.56, 0.64, 1)
// Very fast stagger: 50ms between itemsAnimated gradients and background effects
background: linear-gradient\nbackground-size: 300%\nanimated background-positionmultiple radial-gradients\noverlapping animated positions\norganic mesh lookrepeating-linear-gradient\n45deg diagonal stripes\nbackground-position animationmultiple blur layers\noverlapping gradients\nslow position animationradial-gradient dots\nbackground-size: 20px 20px\nsubtle animated opacityconic-gradient\nanimation: spin 3s linear infinite\ncolorful wheel effectClick to toggle state ā smooth transitions between states
translateX(0 ā 24px)\nbackground-color transition\nsmooth 0.3s easemax-height: 0 ā 200px\noverflow: hidden\ntransition: 0.4s ease-outbackground: gradient shift\nborder-radius morph\ntransition: 0.5s easetranslateX based on active tab\nwidth transition\nsmooth tab switchingscale(0 ā 1) + stroke\nstroke-dashoffset animation\nsmooth check mark3 spans rotating + fading\nline 1: rotate(45deg)\nline 3: rotate(-45deg)GPU-friendly canvas-based effects
// Canvas 2D particles
// Lines drawn between nearby particles
// Bounce off edges// Multiple sine waves
// Different amplitude, frequency, speed
// Overlapping transparencyAnimations that respond to scroll position
width based on scrollY
relative to section position
smooth progress indication3 layers at different speeds
translateY: scroll * -0.05/0.12/0.2
parallax depth effectscale(0.5 ā 1.3)
rotate(0 ā 180deg)
opacity(0.3 ā 1) on scrolltranslateX based on scrollY
horizontal movement from vertical scroll
card carousel effectOver-the-top effects for maximum visual impact
clip-path slicing\nmultiple offset color layers\nskew + translate flickerborder-radius keyframes\norganic shape morphing\n+ gradient color cyclingmultiple orbit animations\naccretion disk spin\npulsing glow core3D rotateY with perspective\nsin/cos positioning\npreserve-3d depthSVG goo filter (feGaussianBlur\n+ feColorMatrix)\nblobs merge and separate8 nested rotating rings\nalternating directions\nvarying speed + opacitynested spinning rings\norbiting particles with\ncustom CSS variablesCanvas 2D
Random katakana characters
Fading trail effectCanvas particle system
50 particles per explosion
gravity + fade outRecursive midpoint displacement
Canvas shadow glow
Random branching lightning boltsSmall, delightful interactions that make UIs feel alive
burst ring effect on click\nbounce animation scale\ngrayscale toggle filterMaterial Design ripple\nspawn at click position\nscale(0 ā 4) + fadetransform follows cursor\nmouse position offset * 0.3\nsmooth transition on leaveidle ā loading ā done\nprogress fill animation\ncheck mark pop-inshimmer gradient animation\nbackground-position sweep\nplaceholder layoutbell-ring rotation keyframes\ntransform-origin: top center\nbadge pop scale animationPerspective and 3D space animations
transform-style: preserve-3d
backface-visibility: hidden
:hover ā rotateY(180deg)
transition: 0.8s@keyframes cubeSpin
rotateX + rotateY (0ā360deg)
transform-style: preserve-3d
animation: 4s linear infinite@keyframes carouselSpin
rotateY(0 ā 360deg)
children: rotateY(n*60deg)
translateZ(130px)onMouseMove ā calc rotateX/Y
perspective(600px)
transition: 0.1s ease-out
tilt toward cursor positiontransform-origin: top
rotateX(-90deg ā 0deg)
transition: 0.6s ease
accordion fold/unfold in 3D@keyframes flipLetter
rotateX(0 ā 360deg)
animation-delay: i * 0.12s
stagger per charactertransform-style: preserve-3d
layers at translateZ(20-80px)
@keyframes parallaxFloat
subtle depth illusiontransform-origin: left center
rotateY(0 ā -110deg)
perspective: 800px
transition: 0.8s easetransform-origin: left center
rotateY(0 ā -180deg)
perspective: 1200px
page flip with backfaceScalable vector graphics in motion
stroke-dasharray: 800
stroke-dashoffset: 800 ā 0
complex path self-drawscircle ā star ā square
opacity crossfade morph
3s infinite cyclestroke-dasharray per segment
staggered dashoffset ā 0
handwriting reveal effectletters stagger in
translateY + scale + opacity
0.15s delay per letterconcentric expanding rings
r: 8 ā 55, opacity: 1 ā 0
staggered 0.6s delaysstroke-dasharray: 283
stroke-dashoffset animated
percentage text countersine wave path repeating
translateX shift animation
clipped to viewportbar chart with scaleY(0 ā 1)
staggered per bar
transform-origin: bottominterlocking gears
rotate CW + CCW
tooth mesh alignmentShape masking and reveal effects
clip-path: circle(0% at 50% 50%)
-> circle(70% at 50% 50%)
animation: 3s ease-in-out infiniteclip-path: polygon(...)
triangle -> pentagon -> star -> circle
animation: 5s ease-in-out infiniteclip-path: polygon(0 0, 0 0, 0 100%, 0 100%)
-> full rectangle
animation: 3s ease-in-out infiniteclip-path: circle(0% at 50% 50%)
-> circle(70%) // hold
-> circle(0%) // close
animation: 2.5s infiniteclip-path: polygon(...)
5 horizontal slats expanding
like window blinds
animation: 3s ease-in-out infiniteclip-path: polygon(
50% 50%, 50% 50%,
50% 50%, 50% 50%)
-> diamond shape
animation: 2.5s infiniteclip-path: polygon(...)
4-point star -> 6-point
-> 8-point -> loop
animation: 3s infiniteclip-path: polygon(...)
wavy bottom edge shifts
phase back and forth
animation: 2s infiniteclip-path: polygon(
50% 0%, 50% 0%,
50% 100%, 50% 100%)
-> full rectangle
animation: 3s infiniteBlur, color, and visual effect transitions
filter: hue-rotate(0deg)
animation: hue-rotate 3s linear infinite
cycles through all colorsfilter: blur(0px) -> blur(8px)
animation: blur-pulse 3s ease-in-out infinite
pulsing blur effectfilter: brightness(0.5) -> brightness(1.5)
animation: brightness-pulse 2s ease-in-out infinite
oscillating brightnessfilter: saturate(0) -> saturate(3)
animation: saturate-cycle 4s ease-in-out infinite
grayscale to super-saturatedfilter: contrast(0.5) -> contrast(2)
animation: contrast-shift 3s ease-in-out infinite
image pops in and outfilter: invert(0) -> invert(1)
animation: invert-flash 2s ease infinite
brief strobe-like flashesfilter: sepia(1) -> sepia(0)
animation: sepia-to-color 4s ease-in-out infinite
transition from sepia to full colorfilter: drop-shadow(...)
animation: drop-shadow-dance 2s ease infinite
shadow moves around the elementfilter: hue-rotate() blur() brightness()
all three animating simultaneously
complex multi-filter compositionInfinite scrolling and ticker effects
@keyframes marquee-left {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
Duplicate content for seamless loop@keyframes marquee-right {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
Start offset, scroll to 0@keyframes ticker-up {
0% { transform: translateY(0); }
100% { transform: translateY(-50%); }
}
Duplicate items, overflow hiddenmask-image: linear-gradient(
to right, transparent,
black 15%, black 85%,
transparent
)
Fade edges hide seamanimation-duration: 35s; /* slow */
animation-duration: 18s; /* medium */
animation-duration: 8s; /* fast */
Same keyframes, different speedsHover to pause
.container:hover .track {
animation-play-state: paused;
}
Pauses on mouse hoverRow 1: marquee-left
Row 2: marquee-right
Opposite directions create
a dynamic layered lookmask-image: linear-gradient(
to right,
transparent 0%,
black 15%,
black 85%,
transparent 100%
)
Smooth edge fade with CSS maskReal physics-based motion and elastic effects
F = -kx - bv
requestAnimationFrame loop
pointer events + snap backspring-pop-in keyframes
scale overshoot: 1 ā 1.15 ā 0.92
cubic-bezier(0.34, 1.56, 0.64, 1)5 connected spring bodies
each follows the previous
F = k * (prev.x - curr.x) - bvspring toward alternating target
F = -k(y - target) damped
smooth arrow bounce loopspring to target (0 or 28px)
initial velocity kick for overshoot
F = -k(x - target) - bvv += gravity each frame
bounce: v = -v * restitution
staggered drop timingangular accel = -(g/L)*sin(Īø)
damping * 0.997 per frame
resets when energy depleteddrag down with 0.6x resistance
spring snap-back on release
scaleY stretch while pulling5 pendulums with collision
elastic momentum transfer
angular physics + dampingAnimated borders, outlines, and edge effects
/* Rotating conic-gradient border */
.box::before {
background: conic-gradient(...);
animation: spin 3s linear infinite;
}
.box::after {
inset: 3px;
background: #1e1b2e; /* mask inner */
}@keyframes neon-pulse {
0%,100% { box-shadow: 0 0 5px cyan; }
50% { box-shadow: 0 0 25px cyan,
0 0 50px cyan; }
}
border-color animates with glow/* 4 spans, one per side */
.top { animation: draw-top 0.5s; }
.right { animation: draw-right 0.5s 0.5s; }
.bottom { animation: draw-bottom 0.5s 1s; }
.left { animation: draw-left 0.5s 1.5s; }<svg><rect
stroke-dasharray="8 8"
stroke-dashoffset animates
animation: march 1s linear infinite
/></svg>background: linear-gradient(
90deg, rose, amber, emerald,
cyan, indigo, violet, rose
);
background-size: 300%;
animation: shift 3s linear infinite;/* Glowing dot traces the border */
conic-gradient(
transparent 340deg,
violet 345deg, cyan 355deg,
transparent 360deg
);
animation: rotate 3s linear infinite;/* Two concentric borders */
outer: box-shadow pulse (rose)
inner: box-shadow pulse (violet)
/* Alternate timing with delay *//* Animated corner brackets */
.corner {
border-top + border-left: 2px;
animation: expand 2s infinite;
}
/* Each corner delayed 0.5s */@keyframes morph {
0% { border-radius: 60% 40% 30% 70%
/ 60% 30% 70% 40%; }
50% { border-radius: 50% 60% 30% 60%
/ 30% 60% 70% 40%; }
}
Organic blob shape transitionsInteractive mouse-following animations
// Store last N mouse positions
const [trail, setTrail] = useState<Dot[]>([]);
setTrail(prev => [...prev.slice(-19), newPos]);
// Render with decreasing size & opacityHidden Treasure
Explore the darkness
// Dark overlay with radial-gradient cutout
background: radial-gradient(
circle 80px at ${x}px ${y}px,
transparent 0%, rgba(0,0,0,0.92) 100%
);// Calculate distance to cursor
const dist = Math.sqrt(dx*dx + dy*dy);
if (dist < maxDist) {
const force = (1 - dist/maxDist) * 35;
target += (dx/dist) * force; // attract
}// Repel force: opposite of magnetic
const force = (repelRadius - dist) / repelRadius;
p.vx += (dx / dist) * force; // push away
// Spring back: p.vx += (baseX - p.x) * 0.02;// Spawn ripple at cursor on move
const age = (now - ripple.born) / duration;
const scale = 1 + age * 3;
const opacity = 1 - age;
// Clean up expired ripples periodically// Map mouse position to rotation
const rotateX = (0.5 - y) * 30;
const rotateY = (x - 0.5) * 30;
// Light reflection follows cursor
radial-gradient(at ${x}% ${y}%, white, transparent)Organic shapes, fluid dynamics, and blob effects
<feGaussianBlur stdDeviation="10" />
<feColorMatrix values="...20 -10" />
SVG goo filter merges blobs4 circles + SVG goo filter
feGaussianBlur + feColorMatrix
merge when overlappingSVG <animate> for drop path
ellipse ripples on impact
splash particles on collisionborder-radius: 40% 60% 60% 40%
/ 60% 30% 70% 40%
animated organic blob morphtranslateY for fill level
SVG wave path on top surface
two wave layers, opposite directioncanvas putImageData per-pixel
sin/cos color patterns
v = sin(x) + sin(y) + sin(x+y) + sin(sqrt(...))canvas radialGradient particles
rise with turbulent vx drift
fade via alpha over lifetime3x3 grid of gradient blobs
border-radius morph keyframes
staggered animation-delayspring tension + damping physics
wave propagation via spread factor
click to pluck, vibrates naturally