https://qiita.com/Qiita/items/563a6ea111709a03fbea
このうち
記事の投稿・更新中にローディングアニメーションを表示するようにしました
っていうのははやりなのかな？
https://www.mlit.go.jp/plateau/
ここなんかまさにそれ。
ローマは一日にしてならない
フロントエンドへアニメーションのイメージを伝えるための4つの方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作 すーちゃん 2016.10.11
https://liginc.co.jp/306049
このうち、ナビゲーションの開閉が現在の流行に近いと思われる。
CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法 | Webクリエイターボックス
https://www.webcreatorbox.com/tech/loading-animation
【コピペでOK】イメージ別！サイトをリッチに見せるためのCSSアニメーションまとめ【デモ・サンプルコード付き】 – 東京のホームページ制作 / WEB制作会社 BRISK
https://b-risk.jp/blog/2021/01/anim-reference/
そこで本記事では、そういった言葉にしにくい部分にフォーカスを当てて、シンプル・綺麗、ポップ、スタイリッシュ、柔らかい印象などのイメージ別にCSSアニメーションをご紹介します。
デモ・サンプルコード付きですので、ぜひイメージ通りのアニメーションを探してご活用ください。
今回紹介するアニメーションのほとんどは、CSSのanimationプロパティを利用して設定されていますので、animationプロパティについても簡単に解説していきます。
（中にはtransitionプロパティでアニメーションを設定したものもあります。）
やはりアンチも現れる
アニメーションを望まないユーザーを考えたWeb制作をしよう｜prefers-reduced-motion | JAJAAAN
https://jajaaan.co.jp/web-production/frontend/prefers-reduced-motion/
アニメーションを 望まないユーザーに 対応したWeb制作
Webサイト制作の方法は年々代わり、表現方法も多彩になっていきます。
特にアニメーションなどの表現を盛り込んでいるWebサイトも多いでしょう。
弊社のサイトもアニメーションが多いです。
Webサイトにアニメーションは必須ではない
「動かしたほうが目立ってインパクトがあるから」という単純な理由でWebサイトにアニメーションを実装していないでょうか？
アニメーションは効果的に使うことで伝えたい情報をユーザーに的確に与えることができます。
しかしその反面、最近はアニメーションが不要だというケースが多いように感じてきました。
ネットを利用する年配の方が増えてきたという背景もあります。
クライアントによってはアニメーションをご要望される場合も多いですが、「本当にそのアニメーションは必要なのか？」ということを考える必要があります。
2023年現在の記事
だがちょっと待ってほしい。
HTML | marqueeタグは非推奨、代替で使えるCSSを紹介 | ONE NOTES
初出2021-12-28更新2022-01-29
https://1-notes.com/html-marquee-alternative-css/
かつてMaruqueeタグでやってきたことをCSSでど派手にやっているという感じ
それに、「Webサイトにアニメーションは必須ではない」というのは当然なような気もする。
認知プロファイリング
これらの記事を見ると、アニメーションをくっつけるのはクライアントのためであって、実際にWebを見る人のためではないって感じになっている。
ローディングアニメーションで検索
2013
ページを読み込んだ時に一度だけ動かすCSSのanimation | パソコン倶楽部りんご
jQueryで簡単なloading画面を作る
https://sterfield.co.jp/blog/2824/
2014
【JQuery】処理待ち中にアニメーション表示する – ysklog
ドット絵のアニメーションする砂時計のローダーデザイン 『Hourglass Loader』 | 9ineBB
【10分ぐらいでできる！】Illustratorで作るSVGローディングアニメーション | 尼崎市でWEB制作してます［s-oyama.me］ 2024/08
https://s-oyama.me/blog/web-creation/272/
submitとローディング 2014年11月12日
https://qiita.com/tomtoma/items/920f6e74358593612b08
2015
刀でズバッと斬るようなアニメーションをHTML・CSS・JS（jQuery）で実装する方法 2015/02/28
https://liginc.co.jp/web/html-css/143360
Canvasで実装するシンプルなローディング画面3パターン 2015/05/26
https://qiita.com/nekoneko-wanwan/items/be099f0af4155f8a32b4
【JQuery】処理待ち中にアニメーション表示する – ysklog
https://sterfield.co.jp/blog/2824/
CSS によるローディングアニメーションを簡単に生成できる「CSS Load.net」｜CSS｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
https://www.webantena.net/css/css3-loading-created-by-css-looadnet/
CSSだけで作るloadingシリーズをまとめて「loadingアイコンメーカー」として提供を開始しました [無料ホームページ作成クラウドサービス まめわざ] 2015/9/3
https://mamewaza.com/support/blog/howto-use-loading-tools.html
わかったこと
ローディングアニメーションという単語の確立
ローディングアニメーションという単語が固まったのは2014年ごろで、それ以前はローディングなんとかとか言っていた。
ローディングアニメーションの起源は砂時計
明確に処理待ちに使うというのは砂時計からのようだ。今のアニメは砂時計が最初だった。
処理待ちから開くときに必ず表示へ変化
次に処理待ち中にウェブを訪問した人が逃げていかないようにアニメを付けたのが最初ということになる。
とはいうものの、2016年に入るまではちょっとした技のように扱われていたようだ。
しかし、2016年に入ると、「開くときに必ず見せる」という立ち位置に変化している。
ローディングの意味が違うんですけど・・・
ローディング 読み込むまでの待機中の時間に表示
ローディング ページを開くときに表示
もともとはローディング アイコンだったりしますね。