CSS animation で遊び倒す - Scroll Arrow2  -

CSS animation day32 となりました。
最近あったかくなりましたね。

本日は、microinteraction として使える、scroll arrow part2 をお届けします。


#1. 完成版

![ダウンロード (25).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/ba769f43-041c-b594-8a2c-5d680056aad9.gif)


<p class="codepen" data-height="414" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="omrxdj" style="height: 414px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Mouse Scroll Arow">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/omrxdj/">
  Mouse Scroll Arow</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. 参考文献
[Mouse-Animation-Scroll-CSS](https://codepen.io/PTiCA1/pen/vKxVME)
[Animated Mouse Scroll Using Only HTML & CSS](https://www.youtube.com/watch?v=FdFdP4DDz3M)

#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="mouse"></div>
    </div>
  </body>
</html>
```


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

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.mouse {
  width: 70px;
  height: 120px;
  border: 1px solid #cfc;
  border-radius: 30px;
}
```

<img width="641" alt="スクリーンショット 2019-02-22 13.30.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/c30c2f9f-11e8-4c43-9ee8-fa37f3727445.png">


次に、マウスの中に、小さな丸を作りましょう。
HTMLを汚したくないので、beforeクラスを使います。

```styles.scss
.mouse:before {
  content: "";
  width: 20px;
  height: 20px;
  background: #cfc;
  display: flex;
  margin: 20px auto;
  border-radius: 50px;
}
```

<img width="433" alt="スクリーンショット 2019-02-22 14.14.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/3cd98af5-9a26-4918-c6b4-d6cbaa2ccaa4.png">




❷.

以下のように、animation を作ります。

1. opacity を変化させる
2. 丸の位置を、下にずラス
3. 前回作った[矢印](https://qiita.com/duka/items/ddd8276ba773ac7fe0e3)と、合体させる。


順にやっていきましょう。

```styles.scss
.mouse:before {
  content: "";
  width: 20px;
  height: 20px;
  background: #cfc;
  display: flex;
  margin: 20px auto;
  border-radius: 50px;
  animation: mouse 1.3s infinite;
}

@keyframes mouse {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
```

![ダウンロード (22).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/d429d545-60be-963b-500b-ddbde0c94d71.gif)

いい感じです。

次に、移動させましょう。

```styles.scss

@keyframes mouse {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(60px);
  }
}
```

![ダウンロード (23).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/5737cbf9-60e7-30e4-09fd-4a8a1ee07e06.gif)

いい感じです。

❸.
前回作った矢印のアニメーションと合体し、2つのアニメーションの違和感がないように、微調整します。

```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="mouse"></div>
      <div class="arrow"></div>
      <div class="arrow"></div>
      <div class="arrow"></div>
    </div>
  </body>
</html>
```

```styles.scss

.arrow {
  width: 30px;
  height: 30px;
  border-bottom: 1px solid #cfc;
  border-right: 1px solid #cfc;
  transform: rotate(45deg);
  animation: move 1.3s infinite;
  margin: -3px;
}

@keyframes move {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translateY(40px) rotate(45deg);
  }
}
```

![ダウンロード (25).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/0d4d86e8-7dfa-11c4-3270-2a1296c43c6e.gif)


できました！

❹.
microinteraction ということを考えると、この表現がギリギリシンプルの範囲内かなという気がします。

TechAcademyの[記事](https://techacademy.jp/magazine/11670) によると、microinteraction は、デザイナーのエゴをすて、単一の動きで表現する必要があります。

今回の場合、単一な下向きの動きを取り入れているので、例えば、ここに横方向の動きを加えると、マイクロなインタラクションではなくなります。User が適切なアクションをとれるという本来の目的を見失ってしまいますね。

このように、デザイナーのエゴを捨てるというのは、難しいですが、重要です。What や How からでなく、Why → How → What の順番で考えることが大事です。つまり、なぜアニメーションを作るのか？と考えなければらなず、今後も、常に気をつけていきたいところです。

それでは、また明日〜