はじめに
手軽に使えるようなCSSアニメーションをローディングアニメーションを中心に制作・まとめました。
CSSアニメーションというのは、JavascriptなしでHTML要素にアニメーションをつけることができるCSSの機能です。
CSSアニメーションについての概要は以下の記事が参考になります。今回の記事は制作のまとめのような形なのでCSSアニメーションについての説明は割愛します。
CSSアニメーション 入門
https://qiita.com/soarflat/items/4a302e0cafa21477707f
共同制作： @tehoooo
ローディングその１
基本的な円が回転するアニメーションです。
実装的にもシンプルで円を回転させているだけです。
See the Pen loading by tabata (@sinobata) on CodePen.
ローディングその2
3つの点が順番に大きさが変動していきます。
animation-delay を使って順番に大きさが変更されるようなアニメーションになっています。
See the Pen loading by tabata (@sinobata) on CodePen.
ローディングその3
今はあまり見かけない床屋のポール（サインポール）のようなアニメーションです。
パーセンテージを表すときにも使うことができるため汎用性は高めです。
See the Pen loading2 by tabata (@sinobata) on CodePen.
ローディングその4
遺伝子のような形をしたアニメーションです。
回転→移動→逆回転というアニメーションをanimation-delay を使うことで遺伝子っぽくしています。
See the Pen Helix_practice by TEHO (@tehoooo) on CodePen.
ローディングその5
飛び跳ねるボールのようなアニメーションです。
影がある分リッチっぽくなります。
See the Pen Bouncing_Loader_Practice by TEHO (@tehoooo) on CodePen.
ローディングその6
一風変わったアニメーションです。
SVGで円を作ってそのパス上に文字を配置して回転しています。
See the Pen circul text by tabata (@sinobata) on CodePen.
タイピングアニメーション
CSSだけのタイピングアニメーションです。文章の途中などにも使うことができます。
See the Pen typing by tabata (@sinobata) on CodePen.
リッチなメニュー
他とは毛色は違いますが、ホバーすると箱が浮かび上がるようなアニメーションです。
See the Pen social_link_practice by TEHO (@tehoooo) on CodePen.