CSS animation で遊び倒す　- Atttention-

CSS animation day3 となりました。
本日は、ボタンで拍動を表現し、注目を集めるデザインを作りたいと思います。　


#1. 完成版
![ダウンロード (11).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/919857f3-72be-7ca4-9ee0-3e36553dd541.gif)

#2. なぜ、Attention か？　


以前の[記事](https://qiita.com/duka/items/290aa4ca80b68c8effe3)の通りですが、Google material design のFabボタンを、なんとか目立たせたいです。　


![ダウンロード (8).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/88ac4497-ad93-8c60-30c1-bc686fa1ef8b.gif)


[参考資料](https://coliss.com/articles/build-websites/operation/work/good-to-great-ui-animation-tips.html)


こういうマイクロインタラクションは、ユーザー体験を向上させますね、デザインは奥深いです。。。。　


#3. どうやるか？

[こちら](https://www.youtube.com/watch?v=r_RXm5NyBo0)を参考にしました。

#4. 分解してみる　

ではやっていきましょう！　
まずは、中央に丸ボタンを作ります。

<img width="534" alt="スクリーンショット 2019-01-23 8.00.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/d8d1a137-a81f-00e0-ab2a-db66c2f09d7d.png">



```inde.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/styles.css">
    <style>
    </style>
</head>
<body>
    <div class="center">
        <div class="pulse">!</div>
    </div>
</body>
</html>
```

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

.center{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
}

.pulse{
    width: 100px;
    height: 100px;
    background: skyblue;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    font-weight: bold;
    color: #fff;
}
```
<br/>
<br/>
次がポイントとなります。　
ボタンの周りの波動を表現するにはどうしたら良いでしょうか？　

・・・

影をつけるプロパティを、全方向へ使えばいい・・・
<br/>
そうです、[box shadow](https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow) プロパティです！　
　

MDN を読むと、 box shadow の4つめの <spread-radius> に、値を設定し、animationをつければ良さそうです！


![ダウンロード (9).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/f3e6b16b-7e36-5fee-27d1-c21a68f6d69d.gif)


``` styles.css
.pulse{
    width: 100px;
    height: 100px;
    background: skyblue;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    font-weight: bold;
    color: #fff;
    animation: pulsation 3s linear infinite;
}


@keyframes pulsation{
    0%{
        box-shadow: 0 0 0 0 rgba(225, 0, 178, .7)
      }
    40%{
        box-shadow: 0 0 0 50px rgba(225, 0, 178, .7)
       }
    80%{
        box-shadow: 0 0 0 50px rgba(225, 0, 178, .7)
       }
    100%{
        box-shadow: 0 0 0 0 rgba(225, 0, 178, .7)
       }
}
```
<br/>
<br/>
rgba の透明度を変化しましょう

![ダウンロード (10).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/04a2c101-cd56-edbb-c978-df5a26c2bfb7.gif)

```styles.css
@keyframes pulsation{
    0%{
        box-shadow: 0 0 0 0 rgba(225, 0, 178, .7)
      }
    40%{
        box-shadow: 0 0 0 50px rgba(225, 0, 178, 0)
       }
    80%{
        box-shadow: 0 0 0 50px rgba(225, 0, 178, 0)
       }
    100%{
        box-shadow: 0 0 0 0 rgba(225, 0, 178, 0)
       }
}
```
<br/>
<br/>
最後に、keyframe を複数設定し、拍動しているような表現をつけます。


![ダウンロード (11).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/c83784bd-46bc-15de-54c0-5f376f8b5a56.gif)



```styles.css
@keyframes pulsation{
    0%{
        box-shadow: 0 0 0 0 rgba(225, 0, 178, .7), 0 0 0 0 rgba(225, 0, 178, .7)
      }
    40%{
        box-shadow: 0 0 0 50px rgba(225, 0, 178, 0), 0 0 0 0 rgba(225, 0, 178, .7)
       }
    80%{
        box-shadow: 0 0 0 50px rgba(225, 0, 178, 0), 0 0 0 30px rgba(225, 0, 178, 0)
       }
    100%{
        box-shadow: 0 0 0 0 rgba(225, 0, 178, 0),0 0 0 30px rgba(225, 0, 178, 0)
       }
}
```
<br/>

spread radius に異なる値をつけて強弱を表現することで、あたかも、拍動しているかのように見えますね。大変興味深い動きです。 

こうした一見複雑に見える表現も、分解することでわかりやすくなりますね。
それでは、また〜