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

goto_jp 184views 更新:2014年12月22日

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

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

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

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

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

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

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません