CSS animation で遊び倒す - CSS Clip Path-

CSS animation day 52 となりました。

[以前の記事](https://qiita.com/duka/items/2177abdf1cd27aa40786) にて、画像を切り取る方法として、mask プロパティをご紹介しました。

本日は別の手段である、clip-path プロパティについて、ご紹介いたします。


#1. 完成版

<p class="codepen" data-height="599" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="oVqYdJ" style="height: 599px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="SAKURA">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/oVqYdJ/">
  SAKURA</a> by hiroya iizuka (<a href="https://codepen.io/hiroyaiizuka">@hiroyaiizuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


#2. 参考文献
[CSS Clip Path Hover Circle Hover Effects | Html CSS](https://www.youtube.com/watch?v=fvfy-4vQK5M)
[CSS Clip-Path Maker](http://bennettfeely.com/clippy/)
[Introduction to Clipping Using clip-path in CSS](https://alligator.io/css/clipping-with-clip-path/)

#3. 分解してみる

❶. 
マークアップしましょう。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="picture"></div>
    </div>
  </body>
</html>
```


```styles.scss
body {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.picture {
  width: 100%;
  height: 100%;
  background: url("../img/wa.png");
  background-repeat: no-repeat;
  background-size: cover;
}
```

![スクリーンショット 2019-03-15 15.56.08 (1) (1).png](https://qiita-image-store.s3.amazonaws.com/0/232715/91da31f6-7ef1-2d27-d89c-c41e00610ee1.png)


綺麗ですね。
<br/>
❷.
では、clip-path プロパティを使いましょう。

```styles.scss

.picture {
  width: 100%;
  height: 100%;
  background: url("../img/wa.png");
  background-attachment: fixed;
  background-size: cover;
  clip-path: circle(40%);
}
```

![スクリーンショット 2019-03-15 16.11.54 (1) (1).png](https://qiita-image-store.s3.amazonaws.com/0/232715/90b33b97-a1e4-eb54-3a53-f249109ac2bb.png)

一気に、和の感じが出ました。おしゃれですね！ Clip-Path プロパティを解説します。


・__Clip- Path__ (参考文献：[MDN](https://developer.mozilla.org/ja/docs/Web/CSS/clip-path))

要素の 「どの部分を表示するか？」 を設定するクリッピング領域を作るプロパティです。
領域の内部は表示され、外部は非表示になります。

clip-path: <> には、polygon や circle、ellipse などのジオメトリ値や、SVGの clip-path 要素を指定するurl を入れることができます。また、

参考文献のジェネレーターを使えば、自分の思い通りの形で画像を切ることができるでしょう。早速、使ってみましょう。
![スクリーンショット 2019-03-15 16.35.00.png](https://qiita-image-store.s3.amazonaws.com/0/232715/0124620c-189d-6da3-efda-45d18c07dc21.png)


楕円を作りました。左下にあるコードをコピーし、自分のCSSに貼り付けます。

```styles.scss

.picture {
  width: 100%;
  height: 100%;
  background: url("../img/wa.png");
  background-attachment: fixed;
  background-size: cover;
  clip-path: ellipse(47% 57% at 71% 73%);
}
```

![スクリーンショット 2019-03-15 16.37.54 (1).png](https://qiita-image-store.s3.amazonaws.com/0/232715/581c4706-2dc1-b5bb-5419-1a3d9351fa20.png)

思い通りの形に、画像をクリッピングできました。
他にも、吹き出しの形だったり、星の形があったりするので、Web サイトの見出しや挿入に使えますね。
<br/>
❸.
clip-path について、もう少し深くみていきましょう。

```
clip-path: ellipse(130px 140px at 10% 20%);
```

at を使うことで、 position の位置を決めることができます。
(position: absolute のときと同じ配置の決め方です。)


![スクリーンショット 2019-03-15 16.51.45 (1).png](https://qiita-image-store.s3.amazonaws.com/0/232715/2ef26e56-49a0-4382-8e3c-971add0ad497.png)

左上が、   clip-path: ellipse(47% 57%  　__at　 0%　 0%__);
右下が、   clip:path: ellipse(47% 57% 　 __at　80%　100%__);
となります。
<br/>
❹.
では、アニメーションを作っていきましょう。
このat ~ をkeyframe で動かします。

```styles.scss
body {
  margin: 0;
  padding: 0;
  background: linear-gradient(to right, #200122, #6f0000); // 変更
}
.picture {
  width: 100%;
  height: 100%;
  background: url("../img/wa.png");
  background-attachment: fixed;
  background-size: cover;
  clip-path: circle(40%);
  animation: clipmove 12s ease-in-out infinite;
}

@keyframes clipmove {
  0%,
  100% {
    clip-path: circle(10% at 0 0);
  }

  50% {
    clip-path: circle(80% at 100% 100%);
  }
}
```


<p class="codepen" data-height="599" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="oVqYdJ" style="height: 599px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="SAKURA">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/oVqYdJ/">
  SAKURA</a> by hiroya iizuka (<a href="https://codepen.io/hiroyaiizuka">@hiroyaiizuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

このように、clip-path プロパティのおかげで、photoshop のような画像操作ができて、大変素晴らしいですね。　

それでは、また明日〜