#136
インタラクション・アニメーション
#136しーえすえすあにめーしょん
CSS Animation
別名・表記:CSS AnimationKeyframe Animation
UIXHERO Definition
「詳細な動きの指定」。開始から終了までの間に、複数のチェックポイント（キーフレーム）を置いて動きを作る。
概要
transition が「AからBへ」の単純な変化であるのに対し、animation は「AからBへ行って、Cで止まって、またAに戻る」といった物語（シーケンス）をトリガー不要で自律的に再生できる。
animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count (回数), animation-direction (方向), animation-fill-mode (終了後の状態) などのプロパティを組み合わせて制御する。
UXでの活用
- 状態の明示: 通信中のローディング（Spinners）や、データの処理中（Progress Bars）であることを動きで示すことで、ユーザーの不安を解消する。
- アテンション（注意喚起）: 静止画の中で一つだけ動いている要素は強力なアイキャッチになる。ただし、動き続けるものは目障りになりやすいため、数秒で止めるか、控えめな動きにする配慮が必要。
💡 使いどころ
ページ読み込み時のローディングアニメーション、永続的に動き続ける背景エフェクト、複雑なステップを持つインタラクションなど。
⚠️ 注意点・誤用
JavaScriptに比べて制御（動的な値の変更や停止・再開）が難しい場合がある（従来は難しかったが、最近は改善されている）。複雑すぎるとCPU/GPU負荷が高くなるが、transform / opacityは比較的安全。
具体例
- クルクル回るローディングスピナー（無限ループ）
- 注目を集めるために揺れ続けるベルのアイコン
- 画面外からバウンドしながら登場する要素
出典・参考文献:
- W3C. (2013). CSS Animations Level 1. World Wide Web Consortium.
- Mozilla Developer Network (MDN). (n.d.). CSS Animations.
- Google. (2014). Material Design: Motion. Google Design Guidelines.
関連する解説記事
関連する記事詳細が見つかりませんでした。