CSS animation で遊び倒す　- wave -


CSS animation  day2 です。
本日は、波を表現してみたいと思います。　


#1. 完成版　

![ダウンロード (7).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/3a70c783-a940-171c-db64-67ff3f1271c6.gif)


#2. なぜ wave か？

2019 年のデザインは、流体デザインがくると思います。
[こちら](https://webdesign-trends.net/entry/6501) の記事をご参照ください。


このデザイン、なんて心が落ち着くのでしょうか・・・。　


医療現場ではストレスフルな状況なので、自然を少しでも感じて癒せるように、柔らかい表現をしてみたいと思いました。アニメーションを取り入れることで、流動的になり、なんとも言えぬ癒しがあります。

#3. 参考文献
[youtube; 6分で波ができる！わかりやすい動画](https://www.youtube.com/watch?v=dQw9v7bWbPE　) <br/>
[こちら](https://www.youtube.com/watch?v=fKdsaWrrjNM&t=37s)もわかりやすいです


#4. 分解してみる

まず、box を作ります。

<img width="417" alt="スクリーンショット 2019-01-22 18.31.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/599fc988-7fd0-e145-67bc-cde5f86dc9f1.png">


```index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/styles.css">
    <style>
    </style>
</head>
<body>
    <div class="box">
        <div class="wave"></div>
    </div>
</body>
</html>
```


```styles.css
.box{
    position: absolute;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000;
    border: 5px solid #fff;
    box-shadow: 0 0 0 5px #4973ff;
}

```


次に、四角の中のwave を作って行きます。

<img width="551" alt="スクリーンショット 2019-01-22 18.46.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/2a804594-ac7d-7c5a-d8a1-d1567972d8d6.png">

```styles.css

.box{
    position: absolute;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000;
    border: 5px solid #fff;
    box-shadow: 0 0 0 5px #4973ff;

}

.wave{
    position: relative;
    width: 100%;
    height: 100%;
    background: #4973ff;
    box-shadow: inset 0 0 50px rgba(0,0,0,.5)
}
```

ここからがポイントです！！　

波をどう表現するかですが、この四角形の上半分に重なるように、別の四角形を重ねます。


<img width="515" alt="スクリーンショット 2019-01-22 19.19.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/40f75c61-512e-2e92-6c21-3af8e9bfc16a.png">

```styles.css
.wave:before,
.wave:after{
    content: '';
    position: absolute;
    width: 200%;
    height: 150%;
    top:0;
    left: 50%;
    transform: translate(-50%, -75%);
    background: #000;
}
```

この黒い四角形を色を白くして、回転させます。 

![ダウンロード (2).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/e180ccd4-6a01-4260-11bd-bc6a76ef9483.gif)



```styles.css
.wave:before,
.wave:after{
    content: '';
    position: absolute;
    width: 200%;
    height: 150%;
    top:0;
    left: 50%;
    transform: translate(-50%, -75%);
    background: #fff;
}


.wave:before{
    background: #fff;
    animation: rotation 5s linear infinite;
}

@keyframes rotation{
    0%{
        transform: translate(-50%, -75%) rotate(0deg);
    }
    100%{
        transform: translate(-50%, -75%) rotate(180deg);
    }
}
```

四角形を、border-radius　で丸くします。
そして、2つ重ねます。


![ダウンロード (3).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/6b6ff8b9-c2a7-e319-1c27-f2d4499dba68.gif)


```styles.css
.wave:before{
    background: #fff;
    animation: rotation 5s linear infinite;
    border-radius: 40%;
}

.wave:after{
    background: #fff;
    opacity: 0.5;
    animation: rotation 5s linear infinite;
    border-radius: 45%;
}


@keyframes rotation{
    0%{
        transform: translate(-50%, -75%) rotate(0deg);
    }
    100%{
        transform: translate(-50%, -75%) rotate(180deg);
    }
}
```

枠も一緒に動いているので、box のoverflow をhidden にします

```styles.css
.box{
    position: absolute;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000;
    border: 5px solid #fff;
    box-shadow: 0 0 0 5px #4973ff;
    overflow: hidden;
}
```


![ダウンロード (7).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/3a70c783-a940-171c-db64-67ff3f1271c6.gif)

ちょっとぎこちないですが、完成しました。　

他にもいろんなやり方で波が作れると思いますが、初心者中の初心者なので、大目にみてください(ﾉД`)　


それではまた！