はじめに

手軽に使えるようなCSSアニメーションをローディングアニメーションを中心に制作・まとめました。
CSSアニメーションというのは、JavascriptなしでHTML要素にアニメーションをつけることができるCSSの機能です。

CSSアニメーションについての概要は以下の記事が参考になります。今回の記事は制作のまとめのような形なのでCSSアニメーションについての説明は割愛します。

CSSアニメーション入門
https://qiita.com/soarflat/items/4a302e0cafa21477707f

共同制作： @tehoooo

ローディングその１

基本的な円が回転するアニメーションです。
実装的にもシンプルで円を回転させているだけです。

See the Pen loading by tabata (@sinobata) on CodePen.

3つの点が順番に大きさが変動していきます。
animation-delay を使って順番に大きさが変更されるようなアニメーションになっています。

See the Pen loading by tabata (@sinobata) on CodePen.

今はあまり見かけない床屋のポール（サインポール）のようなアニメーションです。
パーセンテージを表すときにも使うことができるため汎用性は高めです。

See the Pen loading2 by tabata (@sinobata) on CodePen.

遺伝子のような形をしたアニメーションです。
回転→移動→逆回転というアニメーションをanimation-delay を使うことで遺伝子っぽくしています。

飛び跳ねるボールのようなアニメーションです。
影がある分リッチっぽくなります。

一風変わったアニメーションです。
SVGで円を作ってそのパス上に文字を配置して回転しています。

See the Pen circul text by tabata (@sinobata) on CodePen.

CSSだけのタイピングアニメーションです。文章の途中などにも使うことができます。

See the Pen typing by tabata (@sinobata) on CodePen.

他とは毛色は違いますが、ホバーすると箱が浮かび上がるようなアニメーションです。