CSS animation で遊び倒す -  mask image animations -

CSS animation day 48となりました。
[前回](https://qiita.com/duka/items/2177abdf1cd27aa40786) mask を使って、画像を切り抜きました。

本日はそこに、アニメーションをいくつか実装していきます。


#1. 完成版
<p class="codepen" data-height="463" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="BbdLvZ" style="height: 463px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="BbdLvZ">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/BbdLvZ/">
  BbdLvZ</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>


<p class="codepen" data-height="377" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="jJLVeo" style="height: 377px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Monster Dreaming Bird">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/jJLVeo/">
  Monster Dreaming Bird</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. 参考文献
[seleQt](https://www.seleqt.net/design/css-svg-canvas-masks/)
[CSS-Mask Button Hover Animation ](https://codepen.io/pizza3/pen/qmerBv?editors=1100)

#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">
      <img src="img/star.png" class="alpha-target" />
    </div>
  </body>
</html>
```


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

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

img {
  display: block;
  max-width: 50%;
  height: auto;
  margin: 0 auto;
}

.alpha-target {
  -webkit-mask-image: url("../img/cat.png");
  -webkit-mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 300px;
  -webkit-mask-position: center center;
  transition: -webkit-mask-size 0.3s;

  &:hover {
    -webkit-mask-size: 900px;
  }
}
```

![スクリーンショット 2019-03-10 16.45.55 (1).png](https://qiita-image-store.s3.amazonaws.com/0/232715/0f1ef8e7-c567-5daa-9509-4ef91f29f978.png)


まず、hover して画像が大きくなるようにしましょう。
 
```styles.scss
body {
  margin: 0;
  padding: 0;
  background: #fffddd;
}

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

img {
  display: block;
  max-width: 50%;
  height: auto;
  margin: 0 auto;
}

.alpha-target {
  -webkit-mask-image: url("../img/cat.png");
  -webkit-mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 300px;
  -webkit-mask-position: center center;
  transition: -webkit-mask-size 0.3s;

  &:hover {
    -webkit-mask-size: 900px;
  }
}
```

<p class="codepen" data-height="463" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="BbdLvZ" style="height: 463px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="BbdLvZ">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/BbdLvZ/">
  BbdLvZ</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>

hover して動くようになりました。

❷. 
keyframes も設定してみましょう。

```styles.scss
.alpha-target {
            ・・・
  transition: -webkit-mask-size 1s;

  &:hover {
    -webkit-mask-size: 300px;
    animation: move 2s ease-out forwards;
  }
}

@keyframes move {
  100% {
    transform: translateX(300px);
  }
}
```

![ダウンロード (56).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/3714636f-136e-b22f-da0f-89420aca7b95.gif)

keyframes　も設定できました。

ただし、背景の星空画像が固定されたままのため、いまいちな表現です。
-webkit-mask-position  を移動させましょう。


```styles.scss


.alpha-target {
  -webkit-mask-position: left center;   //left に変更

  &:hover {
    -webkit-mask-size: 300px;
    animation: move 2s ease-out forwards;
  }
}

@keyframes move {
  100% {b 
    -webkit-mask-position: right center;　　
  }
}
```

![ダウンロード (57).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/3cb9f640-bc37-8811-c3cd-c24387dbb3d6.gif)

綺麗ですね！この表現は使えそうです。
mask はあまり知られていないプロパティですが、通常のCSS animation は使えそうです。
<br/>
❸.
皆さんは、この[鳥](https://qiita.com/duka/items/8939f4fba94f901ca66f)の存在を覚えておりますでしょうか？

<p class="codepen" data-height="630" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="mvOywW" style="height: 630px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="cute bird">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/mvOywW/">
  cute bird</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>


これは、SVGのスプライト画像を作って、step を使ってアニメーションを作ったものです。可愛いですね。
今回は、mask と、この stepテクニックを融合させます。


```styles.scss

.alpha-target {
  -webkit-mask-image: url("https://dl.dropbox.com/s/bb3namh3duwydsb/birds.png?dl=0");
  -webkit-mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  width: 162px;
  height: 168.6px;
  transition: -webkit-mask-size 1s;

  &:hover {
    animation: fly 2s steps(14) infinite;
  }
}

@keyframes fly {
  0% {
    -webkit-mask-position: 0 0;
  }

  100% {
    -webkit-mask-position: -2587px 0;
  }
}
```

![ダウンロード (58).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/827a4ed5-11c0-058b-f7f1-2844d31cc134.gif)

できました！笑

最後に、怪獣化します。

```styles.scss

.alpha-target {
       ・・・
  &:hover {
    animation: fly 2s steps(14) infinite,
　　　　　　　　　move 6s linear infinite;
  }
}

@keyframes fly {
  0% {
    -webkit-mask-position: 0 0;
  }

  100% {
    -webkit-mask-position: -2587px 0;
  }
}

@keyframes move {
  0% {
    transform: translate(0) scale(1);
  }

  20% {
    transform: translateY(0vh) translateX(-30vw) scale(1);
  }

  30% {
    transform: translateY(4vh) translateX(-50vw) scale(1.5);
  }

  40% {
    transform: translateY(2vh) translateX(-25vw) scale(2);
  }

  50% {
    transform: translateY(0vh) translateX(0vw) scale(3);
  }

  60% {
    transform: translateY(0vh) translateX(25vw) scale(5);
  }

  80% {
    transform: translateY(0vh) translateX(30vw) scale(8);
  }
  100% {
    transform: translateY(0vh) translateX(50vw) scale(10);
  }
}
```

<p class="codepen" data-height="377" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="jJLVeo" style="height: 377px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Monster Dreaming Bird">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/jJLVeo/">
  Monster Dreaming Bird</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>


CSS は面白いですね〜
それでは、また明日〜