clip-path 도형을 애니메이션해서 이미지·텍스트가 도려내지듯 드러나게 하는 전환 기법.
디자인 아틀라스<div class="img"></div>.img{width:min(280px,80%);aspect-ratio:16/10;border-radius:14px;
background:linear-gradient(135deg,#5b5bf7,#18c29c 50%,#ffb648);
clip-path:polygon(0 0,0 0,0 100%,0 100%);animation:reveal 3.6s ease-in-out infinite}
@keyframes reveal{
0%{clip-path:polygon(0 0,0 0,0 100%,0 100%)}
40%,55%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
100%{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}}clip-path: inset() · polygon() · circle() 은 요소의 보이는 영역만 잘라내고 레이아웃 공간은 그대로 차지합니다. 두 값 사이를 트랜지션하면 브라우저가 모양을 보간해 닦아내는(wipe) 듯한 리빌 효과가 납니다.
같은 정점 개수를 가진 polygon() 사이에서만 부드럽게 보간됩니다 — 정점 개수가 다르면 매끄럽지 않고 순간적으로 바뀝니다.
스크롤 리빌, 이미지 갤러리 전환, 히어로 진입 애니메이션에 씁니다. 오래된 브라우저는 지원하지 않으니 폴백을 고려하세요.