CSS animation で遊び倒す - Scroll Arrow 1-

CSS animation day31 となりました。

本日から数回にわたり、実際にホームページやアプリで使える、microinteractionをやっていきます。まずは、user に scroll を促す、地味のめ矢印のアニメーションを作ります。


#1. 完成版

![ダウンロード (21).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/7a06a67d-317c-f694-560b-5d88ea54df12.gif)

<p class="codepen" data-height="383" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="bzJzKj" style="height: 383px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Scroll Arrow">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/bzJzKj/">
  Scroll Arrow</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. なぜか？
うまく取り入れられた、microinteraction はuser に快適な体験を与えます。
Google のマテリアルデザインの記事によると、
>ユーザーが重要な何かにアクションをする必要がある時は、アニメーションによって注目を集めるようにします。最初は繊細なアニメーションから始め、アクションの重要度に応じて強度（カラー・サイズ・スピード）を増やします。

とのことです。
注意点として、microinteraction という言葉の通り、派手すぎたり複雑すぎると、busy な印象を与えかねません。[techAcademy](https://techacademy.jp/magazine/11670) の記事によると、単一の統一されたアニメーションがbetter とのことです。

[前回](https://qiita.com/duka/items/5d70de5fbc7e4020ea74) の記事も合わせてご参照ください。


#3. 参考文献
[Css Scroll Indicator Animation - Pure Css3 Animation Effect | Falling Arrow 1](https://www.youtube.com/watch?v=U7ACjZpk-jk)
[Falling Arrow 2 | CSS Scroll Down Indicator Animation Effects](https://www.youtube.com/watch?v=cruSDRWs1o8)

#4. 分解してみる

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

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


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

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
```
<img width="719" alt="スクリーンショット 2019-02-21 8.29.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/b7dd7cb3-559f-0244-5867-27355b379ad2.png">

では、どうやって arrow を作るでしょうか？
border を利用してみます。


```styles.css
.arrow {
  width: 40px;
  height: 40px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
}
```

<img width="474" alt="スクリーンショット 2019-02-21 8.51.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/fb2950cb-454c-18cb-e02b-e1ff8e95fa37.png">

こいつを、rotate しましょう。

```styles.css
.arrow {
  width: 40px;
  height: 40px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(-45deg);
}
```

<img width="504" alt="スクリーンショット 2019-02-21 8.52.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/797d80a3-675e-f71f-ebc0-4a71fc3fdfce.png">

右向きの矢印になりました！
ただし、横スクロールは このスマホ時代UXを損なう([UX MILK](https://uxmilk.jp/64194)) 可能性があり、一般的な、縦スクロールの矢印にしたいと思います。

・・・

では、どうすれば縦向きの矢印になるでしょうか？
さっきのcssを、transform: rotate(90deg) に変えましょう。

<img width="470" alt="スクリーンショット 2019-02-21 8.59.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/01ebf149-aac1-53c2-3419-13cf59b265c7.png">

・・・

ダメですね。

今、一つ一つの矢印は、display: flex のデフォルト設定 (flex-direction: row) の影響 で、横に並んでます。これを縦に並ぶように変更しましょう。


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

.arrow {
  width: 40px;
  height: 40px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
}
```
<img width="587" alt="スクリーンショット 2019-02-21 9.03.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/06d2486c-fb3b-b73d-be0b-45c209c30262.png">


flex-direction: column で、要素が上から下に配置され、完成しました。

❷.
アニメーションを設定しましょう。
どんなアニメーションにするかは、以下の3つを組み合わせます。

1: 明るさが変化する。
2: 1個1個の矢印が動くタイミングがちょっとずつずれる
3: 矢印が下に動く

順に実装していきましょう。

まず、明るさの変化を変えます。

```styles.css

.arrow {
  width: 40px;
  height: 40px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
  animation: move 2s infinite;
}

@keyframes move {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
```
![ダウンロード (18).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/af7f32ba-5e19-827c-9a9b-1dcf5a1564a6.gif)

OKです。

次にタイミングをちょっとずらしましょう。
Scssを使います。

```styles.scss
@for $i from 1 through 3 {
  .arrow:nth-child(#{$i}) {
    animation-delay: 0.15 * $i + s;
  }
}
```
![ダウンロード (19).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/08dc9dbc-7841-942e-e637-7c6c597f92f4.gif)


Good です。
scss のループ文について忘れてしまった方は、[以前](https://qiita.com/duka/items/498d1c72cd46abea8392) の記事をご参照ください。


最後に、各々の矢印を動かしましょう。

```styles.scss

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

![ダウンロード (20).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/fb6bc0ed-3239-da36-32d1-b65eac741d8f.gif)


❸.
最後に表現力を上げるために、微調整します。
margin を小さくして、矢印を近づけ、animation-delay は2番目の矢印からかかるようにしましょう。

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

@for $i from 1 through 2 {
  .arrow:nth-child(#{$i + 1}) {
    animation-delay: 0.15 * $i + s;
  }
}

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

![ダウンロード (21).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/cce59315-9477-50c1-23d6-d1f3da3c17f3.gif)


完成しました！
わかりやすい、microinteraction ですね、こちらのコードはぜひご自由にお使いください。
それでは、また明日〜