LayerTransition
"Wave-like layered reveal animation using CSS clip-path and keyframes"
Made with Workshop
Build your own component with AI
About this Component
Description
This CSS animation creates a layered curtain-style reveal effect using pseudo-elements (:before and :after).
Two layers (orange and aqua) expand and slide upward from the bottom of the screen.
The clip-path: ellipse() property shapes the animation into smooth curves, giving a liquid or wave-like transition feel.
Keyframes (s0, s1, s3) sequentially move, resize, and stretch the shapes to create a dynamic reveal effect.
The background stays black, which makes the bright colors stand out vividly.
Perfect for website intros, transition screens, or section reveals in creative web projects.
