Animated Circle Expansion

Animate circle clip-path using state and transitions. Create expanding and contracting effects.

Key Concepts

• State-based animations
• Transition timing
• Dynamic clip-path values

Technical Details

transition: clip-path 0.5s ease-out;
clip-path: circle(30% at 50% 50%);
/* Expanded state */
clip-path: circle(150% at 50% 50%);