Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
エフェクト Widely available

Animatable clipping paths

clip-path の値をCSSトランジションやキーフレームアニメーションで変化させ、要素の表示形状を滑らかに切り替えられます。円形の拡大・縮小、多角形の変形など、インパクトのあるUI遷移を実現できます。同じ種類のシェイプ関数間でのアニメーションがサポートされています。

アニメーションクリッピング

概要

clip-path の値をCSSトランジションやキーフレームアニメーションで変化させ、要素の表示形状を滑らかに切り替えられます。円形の拡大・縮小、多角形の変形など、インパクトのあるUI遷移を実現できます。同じ種類のシェイプ関数間でのアニメーションがサポートされています。

対応ブラウザ

デスクトップ

Chrome 55+
Edge 79+
Safari 12.1+
Firefox 49+

モバイル

Chrome Android 55+
Safari iOS 12.2+
Firefox Android 49+

基本構文

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

実務での使いどころ

  • 要素の段階的な表示アニメーション

    clip-path を円形からフルサイズにアニメーションさせて、コンテンツが段階的に現れるリビール効果を作成できます。

注意点

  • 異なる種類のシェイプ関数間（例: circle → polygon）のアニメーションはサポートされません。同じ関数で頂点数が同じシェイプ間でのみ補間されます。

アクセシビリティ

  • clip-path アニメーションはモーションを含むため、prefers-reduced-motion メディアクエリでアニメーションを無効化するオプションを提供してください。

参考リンク