Animatable clipping paths | Frontend Practical Guide

Overview

The clip-path property can be animated using CSS transitions and animations.

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`css.properties.clip-path.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)

CSS

.reveal {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.5s ease;
}
.reveal:hover {
  clip-path: circle(100% at 50% 50%);
}

CSS Circleshaperi-l demo.

CSS left from slide demo.

CSS polygonshape demo.

Using Animatable clipping paths
The clip-path property can be animated using CSS transitions and animations.