Animatable clipping paths
The clip-path property can be animated using CSS transitions and animations.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
is animatable | 55 | 79 | 49 | 12.1 | 55 | 12.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.reveal {
clip-path: circle(0% at 50% 50%);
transition: clip-path 0.5s ease;
}
.reveal:hover {
clip-path: circle(100% at 50% 50%);
}Live demo
Use cases
-
Using Animatable clipping paths
The clip-path property can be animated using CSS transitions and animations.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.