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

Animatable clipping paths

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

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

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
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%);
}

ライブデモ

円形リビール

CSS の 円形リビール パターンです。

プレビュー全画面表示

左からスライド

CSS の 左からスライド パターンです。

プレビュー全画面表示

多角形変形

CSS の 多角形変形 パターンです。

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク