CSS animation で遊び倒す - Gooey Loading -

CSS animation day 41となりました。

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

Gooey ってなんぞや？というかたは、以前の記事 をご参照ください。

1. 完成版

2. 参考文献

Code My UI
Gooey Loading Bar
涙- Gooey Effect with SVG filter
photoshopvip

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%;
}

ポイントとして、
・SVGフィルターを使いました。
初めて見られた方は、前回の記事 をご参照ください。

・div のブロック要素を横並びに、中央ぞろえにしたいときに、display: inline-block としました。
これで、text-align: center が使用できるようになります。text-align は、中央ぞろえにしたい親要素につけるように注意しましょう。
サルワカ の記事が大変わかりやすいです。


❷.
では、アニメーションを作りましょう。

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);
  }
}

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


❸.

そんな時は、ディズニーが考案した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);
  }
}

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

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