CSS animation で遊び倒す　- cloud -

CSS animation day7 となりました。

ちょっとはCSS animation に慣れてきましたが、まだ底なし沼の感じがあります。

本日は、雲を表現したいと思います。




#1. 完成版
![ezgif.com-optimize (4).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/1a0f56b9-d0ed-534f-58b0-7af21900dc2b.gif)


<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="WPwxXJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="WPwxXJ">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/WPwxXJ/">
  WPwxXJ</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. なぜか？

雲を取り入れることで、サイトに厳粛な印象を漂わせたり
不思議で魅力的な感じを表現することができます。

有名な素敵なwebサイトですが

[寒川神社](http://samukawajinjya.jp/)
[magic leap](https://www.magicleap.com/) 

こういうデザインは、みるものを本当に魅了しますね！　


#3. 参考文献
[youtube](https://www.youtube.com/watch?v=BGQmVYm88M4)
[雲をこちらからダウンロード](https://drive.google.com/file/d/1ce88NoK6XJn3Sj5b9sjToTs_HVFVKzQL/view)

#4. 分解してみる

❶.
では、画面に雲を出しましょう。

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

</body>
</html>
```

```styles.css
body{
    margin: 0;
    padding: 0;
    background: #090a0f
}

.cloud{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height:100%;
    background: url('../img/clouds.png');
    background-size: cover;
}
```
<img width="1129" alt="スクリーンショット 2019-01-27 8.07.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/23736b1f-a4c5-2928-ea15-ee7bea40ecf8.png">



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


❷.
雲を動かす

```styles.css
.cloud{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height:100%;
    background: url('../img/clouds.png');
    background-size: cover;
    animation: cloud 60s linear infinite;
}

@keyframes cloud{
    0%{
        background-position: 0px;
    }

    100%{
          background-position: 5440px;
    }

}
```

![ダウンロード (18).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/1fb6af94-3361-4041-d891-dd2b6a2be3d3.gif)

ポイントは2つ
・animation の動く時間(60s) はゆっくりの方が、厳かな感じが出そうです。
・background-position 
`100% の設定に、画像の横幅のサイズを書くことで、画像上を左から右までフルに動きます`

❸.
逆方向に流れるゆっくり目の雲を追加します。

```styles.css

.cloud:before{
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height:100%;
    background: url('../img/clouds.png');
    background-size: cover;
    opacity:0.9;
    animation: cloud-reverse 120s linear infinite;
}

@keyframes cloud-reverse{
    0%{
        background-position: 5440px;
    }

    100%{
          background-position: 0px;
    }

}
```

このテクニックは、[wave2](https://qiita.com/duka/items/38858d93438f25831d12) と同じで
逆方向に、ゆっくりなアニメーションを、右から左に流す表現方法です。
画面にさらなる立体感が出て、パララックスの動きと似てますね。


![ezgif.com-optimize (4).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/7a27faa8-80e8-a889-88ed-dec5f1646946.gif)


背景を変えたり、月を添えたり、星をつけたり
いろんな表現を追加するともっと素敵になりますね。

本日は以上です〜