Cascade
Multiple geometric squares cascade downwards in a diagonal wave, filling the frame and then clearing to reveal the next state.
CSS
Curriculum
15 animationsExpand
A small central diamond expands outward, splitting into four quadrants that slide to the corners to reveal the next view.
CSSFlow
A wave of solid curved geometric blocks flows across the screen horizontally, wiping the old view away.
CSSFocus
A series of nested square frames zoom in toward the camera, scaling up past the viewport boundary to transition the view.
CSSGate
Two large solid geometric gates slide inward from the sides to meet at the center, then part to reveal a new layout.
CSSLadder
A vertical ladder of rectangular rungs animates upwards step-by-step, creating a rising vertical wipe.
CSSLevels
Three tiered concentric circles expand in staggered intervals, filling the viewport and then fading to reveal the content.
CSSModular
A grid of square tiles rotates and slides into place like a puzzle, briefly covering the frame to transition the background.
CSSPath
A winding path of interlocking hexagons tiles across the screen, creating a diagonal transition.
CSSReveal
A circular mask expands from the center, with geometric rings sliding outward to transition the canvas.
CSSShutter
A series of vertical geometric slats rotate 90 degrees in sequence, acting as a blind transition to a new view.
CSSSlide
A horizontal track of connected modules slides across the frame, wiping the screen from left to right as a new stage enters.
CSSSpiral
A spiral of overlapping geometric arcs wraps inward to the center and then unwinds outward to reveal the new screen.
CSSStack
A stack of three horizontal slabs rises from the bottom of the frame, each block settling on top of the last to wipe the view.
CSSUnfold
A sequence of four connected rectangular blocks unfolds accordion-style, wiping across the screen to reveal a new layout.
CSS