CSS animation day 48となりました。
前回 mask を使って、画像を切り抜きました。

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

#1. 完成版

See the Pen BbdLvZ by hiroya iizuka (@hiroyaiizuka) on CodePen.

See the Pen Monster Dreaming Bird by hiroya iizuka (@hiroyaiizuka) on CodePen.

#2. 参考文献
seleQt
CSS-Mask Button Hover Animation

#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;
  }
}

まず、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;
  }
}

See the Pen BbdLvZ by hiroya iizuka (@hiroyaiizuka) on CodePen.

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);
  }
}

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;　　
  }
}

綺麗ですね！この表現は使えそうです。
mask はあまり知られていないプロパティですが、通常のCSS animation は使えそうです。

❸.
皆さんは、この鳥の存在を覚えておりますでしょうか？

See the Pen cute bird by hiroya iizuka (@hiroyaiizuka) on CodePen.

これは、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;
  }
}

できました！笑

最後に、怪獣化します。

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);
  }
}

See the Pen Monster Dreaming Bird by hiroya iizuka (@hiroyaiizuka) on CodePen.

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