Các kỹ thuật
Mỗi kỹ thuật được demo sống động trong ít nhất một bản ghi. Click để xem các animation dùng nó.
-
prefers-reduced-motion
4 recordingsUser preference that lets people with vestibular sensitivity opt out of motion. Every recording here demonstrates the fallback.
-
CSS @keyframes
3 recordingsDeclarative time-based animation syntax. Defines named motion curves you attach to elements.
-
SVG <path>
2 recordingsThe workhorse of vector graphics. Bezier + cubic curves via M/C/S/T commands let you describe any shape or flight line.
-
SVG <filter>
2 recordingsDeclarative image processing built into SVG. feGaussianBlur, feDisplacementMap, feTurbulence compose into glow + roughness effects.
-
Staggered animation-delay
2 recordingsNegative animation-delay phase-shifts identical animations along the same timeline. A dozen trail dots, zero extra keyframes.
-
offset-path + offset-rotate
1 recordingMake any element follow an SVG path. Combined with offset-rotate:auto, the element rotates to match the heading along the curve.
-
mix-blend-mode
1 recordingControl how an element's colors blend with what's behind. 'screen' brightens — perfect for glowing trails on dark backgrounds.
-
stroke-dasharray draw-in
1 recordingAnimate stroke-dashoffset from path-length to 0 to 'draw' an SVG stroke on the fly. A foundational technique for hand-drawn reveals.
-
CSS 3D transforms
1 recordingrotateY, perspective, preserve-3d turn 2D elements into unfolding planes. Essential for the parchment-unfold effect.
-
radial-gradient
1 recordingGradient that radiates from a point. Used for the snitch body highlight, the parchment vignette, and the stage atmosphere.
-
steps() timing function
1 recordingSnaps an animation to discrete frames instead of interpolating smoothly. The core trick behind sprite-sheet animation — each step jumps one frame.
-
Sprite sheet animation
1 recordingPack N frames into one image, then animate background-position across them. 1970s arcade technique, still the lightest way to do pixel-art motion on the web.
-
image-rendering: pixelated
1 recordingTells the browser to use nearest-neighbor scaling instead of bilinear smoothing. Mandatory for pixel-art — without it, upscaled sprites turn to mush.