LoginSignup
160

More than 1 year has passed since last update.

手軽に使えるCSSアニメーション

Last updated at Posted at 2022-10-17

はじめに

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

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

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

共同制作: @tehoooo

ローディングその1

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

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.

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
160