CSSのclip-pathで画像をアニメーション切り抜き｜polygonの変形で動きをつける方法

CSSの `clip-path` を使って、画像の形をアニメーションで変化させたい方へ。
このページでは、`polygon()` の座標を変化させることで、画像の切り抜き形状を動かすアニメーションを実装する方法を紹介します。
JavaScript不要で、CSSだけで動作する軽量な演出です。コピペで使えるコード付き。

clip-pathプロパティはCSSでSVGのパス指定を行い、エレメントから切り抜き（クリッピング）ができます。
clip-path:circle(半径 at 中心X 中心Y) や
clip-path:ellipse(半径横半径縦 at 中心X 中心Y) や
clip-path:polygon(x1 y1, x2 y2, x3 y3, ・・・) のように指定します。

animationプロパティは@keyframesとセットで使用します
セレクタ {
animation:キーフレームの名前適用時間(1s等) 変化の度合い(ease等) 開始までの待ち時間(1s等) 繰返し回数(infinite等) 再生方向(normal等) 開始前後の適用(both等) 再生か停止か(running等);
}
@keyframes キーフレームの任意の名前 {
0%{CSSプロパティ名:値;}
100%{CSSプロパティ名:値;}
}

アニメーション開始

HTML、CSS

<div class="frame-ani">
  <img class="frame-ani-main" src="./imgs/c001.jpg">
  <div class="frame-ani-sub"></div>
</div>

<style>
  .frame-ani{
    position:relative;
    display:inline-block;
  }
  .frame-ani-main{
    width:100vw;
    max-width:600px;
    animation: frame-ani-main 2.0s linear 0.00s 1 normal both running;
  }
  .frame-ani-sub{
    position:absolute;
    left:0;top:0;
    right:0;bottom:0;
    background:#fcc;
    animation: frame-ani-sub 2.0s linear 0.00s 1 normal both running;
  }
@keyframes frame-ani-main {
    0%{clip-path:polygon(  0%   0%,   0% 100%,   0% 100%,   0%   0%);}
   20%{clip-path:polygon(  0%   0%,   0% 100%,   0% 100%,   0%   0%);}
   80%{clip-path:polygon(  0%   0%,   0% 100%,  80% 100%,  80%   0%);}
  100%{clip-path:polygon(  0%   0%,   0% 100%, 100% 100%, 100%   0%);}
}
@keyframes frame-ani-sub {
    0%{clip-path:polygon(  0%   0%,   0% 100%,   0% 100%,   0%   0%);}
   20%{clip-path:polygon(  0%   0%,   0% 100%,  20% 100%,  20%   0%);}
   80%{clip-path:polygon( 80%   0%,  80% 100%, 100% 100%, 100%   0%);}
  100%{clip-path:polygon(100%   0%, 100% 100%, 100% 100%, 100%   0%);}
}
</style>