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

Animatable clipping paths

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

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

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.clip-path.is_animatable
55
79
49
12.1
55
12.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は 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%);
}

ライブデモ

Circleshaperi-l

CSS Circleshaperi-l demo.

プレビュー全画面表示

left from slide

CSS left from slide demo.

プレビュー全画面表示

polygonshape

CSS polygonshape demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク