CSS3:ローディングアイコンとCSSアニメーションの考え方

See the Pen CSS only indicator by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

こちらのローディングアイコンはCSSのみで表現しています。

明滅が回転しているように見えますが、丸一つだけに注目してもらうと色が変わっているだけで、その変化が時間差で起きているだけです。

表現している要点は下記3点です。

  • 半透明の「●」を8個生成して円状に配置する (transform)
  • 「●」に透明度を変化させるアニメーションを適用する (animation, keyframes)
  • そのアニメーションを「●」1つずつでアニメーションの開始をずらす (animation-delay)

CSSアニメーションは基本的に数値変化の直線でしか行えません。複数のプロパティのアニメーションを組み合わせることで複雑な動きを表現できるようになるので、動きの一つ一つを分解して考えることがキモになります。