CSS animation で遊び倒す　- star -

CSS animation day6 となりました。

本日は、夜空に浮かぶ星を表現したいと思います。


#1. 完成版　

![ダウンロード (17).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/b97fec1f-0c7b-80c3-71d9-de7ac08e4722.gif)

<p class="codepen" data-height="454" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="yZeQYx" style="height: 454px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="yZeQYx">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/yZeQYx/">
  yZeQYx</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. なぜか？　
　
background image に使うと良いですね、心が落ち着きます。

#3. 参考文献
https://www.youtube.com/watch?v=aywzn9cf-_U
https://pastebin.com/gEfdRwgc


#4. 分解してみる

❶. 
ではやっていきましょう。 
まずは背景を作ります。

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

```styles.css
body{
    height: 100%;
    overflow: hidden;
    background: #090a0f
}
```
<img width="1123" alt="スクリーンショット 2019-01-26 13.36.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/db9a8b18-c478-0c2a-6cea-1c8c712a0012.png">

❷. 
星を作ります。
[こちら](https://pastebin.com/gEfdRwgc)から、星のbox-shadowをコピペします。長いです

<img width="939" alt="スクリーンショット 2019-01-26 13.39.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/a573f6ca-f13a-a8c0-ea2a-e73eb0e8f9cb.png">


```styles.css

#stars {
    width: 1px;
    height: 1px;
    background: transparent;
    animation: star 50s linear infinite;
    box-shadow: //ここに、コピペしたやつを貼り付ける  
}


```

こうなります。

<img width="1126" alt="スクリーンショット 2019-01-26 13.44.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/5b4f789d-6a81-8801-c53c-187ada4eec33.png">


❸.
stars:afterにも同じことをする

```styles.css
#stars:after{
    content: '';
    position: absolute;
    top: 2000px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: //ここにコピペする。
}
``` 

❹. 
stars2、stars2:after、stars3、stars3:after  にも同じことをする。

```styles.css
#stars2{
    width: 2px;
    height: 2px;
    background: transparent;
    animation: star 100s linear infinite;
    box-shadow: //ここにコピペする。
}


#stars2:after{
    content: '';
    position: absolute;
    top: 2000px;
    width: 2px;
    height: 2px;
    background: transparent;
　　　　　　　　box-shadow: //ここにコピペする。


#stars3 {
    width: 3px;
    height: 3px;
    background: transparent;
    animation: star 150s linear infinite;
    box-shadow: //ここにコピペする。
}

#stars3:after{
    content: '';
    top: 2000px;
    width: 3px;
    height: 3px;
    background: transparent;
　　　　　　　　box-shadow: //ここにコピペする。

}

```

大小様々な綺麗な星空ができました。

<img width="1129" alt="スクリーンショット 2019-01-26 13.57.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/6d55cbe0-aa92-8923-d9b8-58593c0b86ec.png">

❺.

最後です、アニメーションで動かしましょう。
[雨](https://qiita.com/duka/items/70ebb3d209d080dc5cfb)と同じ、translateY を使います。

```styles.css

@keyframes star{
    from{
        transform: translateY(0px);
    }
    to{
        transform: translateY(-2000px);
    }
}
```

完成！

![ダウンロード (17).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/f1961bcc-9507-f74e-09ce-aac8f1262250.gif)



星の素材をほとんどコピペし、keyframe で上下に動かしただけでしたが、
こんな綺麗な表現ができます。

それではまた明日！