CSS animation で遊び倒す　- wave ver.2-

CSS animation day4 となりました。
本日は、波を表現したいと思います。
<br/>
[day2](https://qiita.com/duka/items/c4cf7fef21d7410063cb) でも波を表現しましたが、いまいち個人的にデザインが納得していないため、


再挑戦したいと思います。


#1. 完成版
![ダウンロード (15).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/9901f1b7-513d-a22a-4775-1a36cc5a5409.gif)


#2. なぜ Waveか？
前回の記事をご参照ください。
(流体デザインを用いた SPAに取り入れるためです。)

#3. 参考文献
[こちら](https://www.youtube.com/watch?v=l5PkvXb3LeU)です。
Youtube　には、こうした動画がいくつも乗っており、大変勉強になってます。


#4. 分解してみる
　
❶.
まず、波を作ります。
今回はsketch でなく、無料で登録してサクサク使える [Figma](https://www.figma.com/)で書きます。　


だがしかし、デザイン初心者の私が

ベジェ曲線をうまく書けるわけない〜〜〜 

いきなりは、無理でしょ、これ
[こちら](https://helpx.adobe.com/jp/illustrator/how-to/draw-edit-curves.html)をみながら、練習し、作りました。　

　
1時間練習の成果：
![ダウンロード (12).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/83f88532-fbc4-ea55-c943-75bdfe0c53e4.gif)
 
2時間格闘した成果:
<img width="1149" alt="スクリーンショット 2019-01-24 10.37.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/1ab22c6a-458c-870b-c1c4-336722e0525b.png">

波が3つできました。では、このpng画像を画面に表示します。


<br/>
<br/>

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <section>
        <div class="wave">
        </div>
    </section>
</body>
</html>
```


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

section{
    width: 100%;
    height: 100vh;
}

.wave{
    position: absolute;
    width:100%;
    height: 165px;
    bottom: 0;
    left: 0;
    background: url('../img/wave1.png');
    background-size: cover;
}
```

でました。
<img width="1279" alt="スクリーンショット 2019-01-24 11.20.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/b95f1801-cd33-8c5a-9c9f-7fedb6c461b3.png">


<br/>
❷.
次に、動かします。　

```styles.css
.wave{
    position: absolute;
    width:100%;
    height: 165px;
    bottom: 0;
    left: 0;
    background: url('../img/wave1.png');
    background-size: cover;
    animation: animate 10s linear infinite;
}

@keyframes animate{
    0%{
        background-position: 0;
    }
    100%{
        background-position: 1193px;
    }
}
```

なんか変な形の波が一つあります。。
気にしないでおきます

![ダウンロード (13).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/f631af68-5fab-2b3b-1911-f0fcbb100135.gif)

ポイントは2つあって、
`・background-size :cover `
ダウンロードした画像の縦横比はそのままで、背景をちゃんと覆う最小サイズになるように設定されていること。

`・background-position: 1193px;`
これは、画像のwidth を設定することです。　

<br/>
❸.
画像を2つのせ、アニメーションを設定する

```styles.css
.wave:before{
    content: '';
    position: absolute;
    width:100%;
    height: 165px;
    top: 0;
    left: 0;
    background: url('../img/wave2.png');
     background-size: cover;
    opacity: 0.4;
      animation: animate-reverse 10s linear infinite;
}

@keyframes animate{
    0%{
        background-position: 0;
    }
    100%{
        background-position: 1193px;
    }
}

@keyframes animate-reverse{
    0%{
        background-position: 1193px;
    }
    100%{
        background-position: 0;
    }
}
```
ポイントは、2つ
`・animate-reverse で逆に動かすことと`
・[background position](https://developer.mozilla.org/ja/docs/Web/CSS/background-position) を逆に設定し、でてくる2つの画像を左右逆に、設定する。


![ダウンロード (14).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/17201ec0-8e30-3116-06ec-15f780283acd.gif)

<br/>
❹.
画像3つ目をアニメーションで設定する。
1つ目と同じ方向に、ゆっくり進むように設定する　

```styles.css
.wave:after{
    content: '';
    position: absolute;
    width:100%;
    height: 165px;
    top: 0;
    left: 0;
    background: url('../img/wave3.png');
    background-size: cover;
    opacity: 0.4;
    animation: animate 20s linear infinite
```

![ダウンロード (15).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/17a7f896-630e-396b-1547-4424737a59fc.gif)


ついに、完成しました。　

え、何か言いたいことがあるって？　


・・・　

波が変な形で、微妙ですね！　


ベジュ曲線、曲者です！練習します〜
ではまた〜