Webフロントエンドでアニメーションを実装する時になにを考えるか - Qiita

明けましておめでとうございます。 アニメーションの実装に抵抗を覚えている方、多いのではないでしょうか？ 特に昨今ではサーバサイド出身で最近フロントエンドを触り始めたという方も多いと思います。私が属している組織でもそんな流れは少なからずあるのですが、そういったバックグラウンドの方の声として聞くことが多い声はやはり「CSSは触りたくない、アニメーション怖い」というものです。 私も少し前まではちょっと複雑なアニメーションを見ると「えぇ…」と思っていたものですが、今ではCoolなアニメーションを見ると「どうやって実現しよう」とワクワクするようになりました(とても正直に言うとあまりに激しめなことされると今でも「えぇ…」とはなります)。 この記事ではあるアニメーション要求がある時に、どうやってそれを実装に落とし込むか、その考え方を私なりに整理したものをまとめてみました。アニメーションに抵抗がある方や、

[hirorock]

CSSなどのアニメーションする際のエフェクトの考え方について

[d4-1977]

アニメーション、今年は少しやりたい（野望…）

[headless_pasta]

良い記事。

[braitom]

アニメーションを実装するときの考え方について。アニメーションの目的、実装するときに考える要素、実例が書かれている。Cognitive Load=アプリを操作するときに消費する脳のパワーを減らすのが目的。

[ymm1x]

認知コストを軽減する手段としてのアニメーション

[murokaco]

“Cognitive Load”

[hiroomi]

”雑に意訳すると「アプリケーションを操作する時に消費するワーキングメモリーの量」”

[mura_2]

ユーザがアプリを使っていると"状態"が変化します。ページが変わったり、モーダルが開いたり、ログイン状態が切れたり。この時一切アニメーションがないとユーザは「なにが変わったのかを自分で見つけて考える」必要