CSS animation で遊び倒す - Gooey Loading  -

CSS animation day 41となりました。

本日は、自分の大好きな表現方法である、Gooey Effect を使った、Loading を作ります。

Gooey ってなんぞや？というかたは、以前の[記事](https://qiita.com/duka/items/cb2fb8550bf78d827cd5) をご参照ください。

#1. 完成版
![ダウンロード (36).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/0fb03cfc-6c09-5791-5115-8b3f56a862ab.gif)



#2. 参考文献
[Code My UI](https://codemyui.com/gooey-circular-spinner/)
[Gooey Loading Bar](https://codepen.io/ky0suke/pen/JYZBeQ)
[涙- Gooey Effect with SVG filter](https://qiita.com/duka/items/3ab7be7b52c88e574273)
[photoshopvip](http://photoshopvip.net/75004)

#3. 分解してみる

❶. 
マークアップしましょう。

```index.html
 <div class="container">
      <div class="gooey">
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <svg>
        <defs>
          <filter id="filter">
            <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
              result="filter"
            />
            <feBlend in="SourceGraphic" in2="blur" />
          </filter>
        </defs>
      </svg>
    </div>
```


```styles.scss
body {
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
}

.gooey {
  width: 100%;
  height: 100vh;
  text-align: center;
  filter: url("#filter");
}

.circle {
  display: inline-block;
  margin-top: 300px;
  margin-right: 20px;
  width: 40px;
  height: 40px;
  background: linear-gradient(45deg, #1488cc, #2b32b2);
  border-radius: 50%;
}
```

![スクリーンショット 2019-03-04 9.32.35.png](https://qiita-image-store.s3.amazonaws.com/0/232715/220e161a-16b5-ad26-9142-3480a413c877.png)


ポイントとして、
・SVGフィルターを使いました。
初めて見られた方は、前回の[記事](https://qiita.com/duka/items/3ab7be7b52c88e574273) をご参照ください。

・div のブロック要素を横並びに、中央ぞろえにしたいときに、`display: inline-block` としました。
これで、`text-align: center` が使用できるようになります。`text-align` は、中央ぞろえにしたい親要素につけるように注意しましょう。
[サルワカ](https://saruwakakun.com/html-css/basic/centering) の記事が大変わかりやすいです。
<br/>
❷.
では、アニメーションを作りましょう。

```styles.scss
.circle:nth-child(1) {
  width: 40px;
  height: 40px;
  background: #00d2ff;
  transform: translateY(-10px);
  animation: move 3s linear infinite;
}

@keyframes move {
  50% {
    transform: translate(300px, -10px);
  }
}
```

![ダウンロード (35).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/2df3eb57-cdf8-132d-e1c0-a64517ea0040.gif)


ちゃんと、Gooey Effect が反映されていますね！
ただ、この動きは単調で、全く面白くありません。どういうアニメーションが良いでしょうか？
<br/>
❸.

そんな時は、ディズニーが考案した12のアニメーションを参照しましょう。
__follow through and overlapping action__ を使用します。

```styles.scss

.circle:nth-child(1) {
  width: 40px;
  height: 40px;
  background: #1488cc;
  transform: translate(20px, 0px);
  animation: move 5s infinite cubic-bezier(0.64, -0.36, 0.1, 2);
}

@keyframes move {
  20% {
    border-radius: 0px;
    transform: skewX(30deg);
  }

  50% {
    transform: translate(330px, 0px);
  }
  100% {
    transform: scale(0.5);
  }
}
```

![ダウンロード (36).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/0fb03cfc-6c09-5791-5115-8b3f56a862ab.gif)

かなり、面白い動きになりましたね！ さすが、天下のディズニーです！　
Loading は本当に奥が深くて、フロントエンドエンジニアの実力の差が明確に出る分野と思います。　　

精進してまいります。
では、また明日〜