Animando Formas com clip-path

CSS pode fazer transições e animações entre dois valores de clip-path, desde que ambos usem a mesma função de forma com o mesmo número de argumentos. A interpolação é feita ponto a ponto.

A revelação clássica com clip-path — o conteúdo desliza da esquerda para dentro:

Expanda um círculo a partir do centro para revelar o conteúdo:

Anime entre formas poligonais para criar um efeito de transformação. Ambos os polígonos precisam ter o mesmo número de vértices:

Para animar entre diferentes formas poligonais (por exemplo, de um triângulo para um quadrado), adicione pontos coincidentes extras à forma mais simples:

Uma imagem de cartão que é recortada em um círculo quando o cursor passa sobre ela:

Transição de varredura diagonal para mudanças de página:

A animação de clip-path aciona a etapa de pintura na maioria dos navegadores, ao contrário de transform/opacity, que usam apenas composição. Para animações complexas em elementos grandes, teste o desempenho no DevTools antes de disponibilizá-las.

Para transparência animada complexa, mask-image com um gradiente animado pode oferecer melhor desempenho do que clip-path em revelações direcionais simples.

Uma suavização com efeito de mola cria revelações com aparência orgânica:

Anime entre formas de clip-path usando transições ou @keyframes. Para a interpolação, é necessária a mesma função de forma com o mesmo número de vértices. Use circle() para revelações expansivas, polygon() para varreduras e transformações e inset() para transições de recorte retangulares. Combine o número de vértices adicionando pontos coincidentes às formas mais simples.