CSS clip-pathアニメーションで作る動きのあるデザイン集【コピペOK】

CSS clip-pathアニメーションで作る動きのあるデザイン集【コピペOK】

clip-pathは要素の表示範囲を切り抜くCSSプロパティですが、アニメーションと組み合わせることで、インパクトのある動きを作ることができます。

この記事では、実務で使えるclip-pathアニメーションを初級〜上級に分けて紹介します。すべてコピペOKです。

初級：シンプルなホバーアニメーション

① 左からスライド表示

HTML
<div class="box-wrap">
  <div class="box"></div>
</div>
CSS
.box {
  width: 300px;
  height: 150px;
  background: #3498db;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.5s ease;
}

.box-wrap:hover .box {
  clip-path: inset(0 0 0 0);
}

右側を100%カットした状態から、ホバーで表示させるシンプルなアニメーションです。

② 円形から表示（丸マスク）

HTML
<div class="circle"></div>
CSS
.circle {
  width: 200px;
  height: 200px;
  background: #e74c3c;
  clip-path: circle(10% at 50% 50%);
  transition: clip-path 0.5s ease;
}

.circle:hover {
  clip-path: circle(75% at 50% 50%);
}

中心から広がるような演出が可能です。

中級：デザイン性のある動き

③ 斜めスライドイン

HTML
<div class="diagonal-wrap">
  <div class="diagonal"></div>
</div>
CSS
.diagonal {
  width: 300px;
  height: 150px;
  background: #2ecc71;
  clip-path: polygon(0 0, 0 0, -40% 100%, 0 100%);
  transition: clip-path 0.5s ease;
}

.diagonal-wrap:hover .diagonal {
  clip-path: polygon(0 0, 140% 0, 100% 100%, 0 100%);
}

斜めのラインを使ったモダンな表示アニメーションです。

④ テキストリビール（下から表示）

HTML
<div class="clip-reveal">
  <span>Clip-path Animation</span>
</div>
CSS
.clip-reveal {
  display: inline-block;
}

.clip-reveal span {
  display: inline-block;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.5s ease;
}

.clip-reveal:hover span {
  clip-path: inset(0 0 0 0);
}

テキストを下から滑らせて表示するUI。LPなどでよく使われます。

Clip-path Animation

上級：複雑なclip-pathアニメーション

⑤ 波形アニメーション

HTML
<div class="wave"></div>
CSS
@keyframes wave {
  0% {
    clip-path: polygon(0 50%, 25% 55%, 50% 50%, 75% 45%, 100% 50%, 100% 100%, 0 100%);
  }
  50% {
    clip-path: polygon(0 55%, 25% 50%, 50% 55%, 75% 50%, 100% 55%, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 50%, 25% 55%, 50% 50%, 75% 45%, 100% 50%, 100% 100%, 0 100%);
  }
}

.wave {
  width: 100%;
  height: 200px;
  background: #9b59b6;
  animation: wave 3s infinite ease-in-out;
}

背景に動きを出すことで、リッチな印象を演出できます。

⑥ ホバーで分割表示（スライスエフェクト）

HTML
<div class="slice"></div>
CSS
.slice {
  width: 300px;
  height: 150px;
  background: #f1c40f;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.4s ease;
}

.slice:hover {
  clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%);
}

分割されたような動きで、インパクトのあるUIになります。

まとめ

  • clip-pathはアニメーションと組み合わせると強力
  • ホバー演出・UI演出に最適
  • polygonを使うと自由度が大幅に上がる

カードUIやボタンと組み合わせることで、より実務的なデザインに活用できます。

関連記事

PAGE TOP