#088
インタラクション・アニメーション
#088きーふれーむ
キーフレーム
別名・表記:Keyframeキーフレームアニメーション
UIXHERO Definition
「動きの通過点」。ここからここまで動く、という指定ポイント。
概要
手描きアニメーションの時代、熟練のアニメーターが描く「原画」がキーフレームに相当する。キーフレームは「状態の宣言」であり、実際の動きは補間（Interpolation）によって生成される。
CSSでは @keyframes ルールを使って、「どのタイミング（%）」で「どのプロパティ（CSS）」をどう変えるかを記述する。フレーム単位ではなく「時間割合（%）」で指定する点がWeb特有。
UXでの活用
- ストーリーテリング: 単純な移動だけでなく、登場（Enter）、注目（Emphasis）、退場（Exit）といった一連の流れを設計できる。
- 微調整: 「ボタンを押した瞬間に少し凹んで、指を離すと元に戻る」といった微細な挙動も、キーフレームを使えば正確にコントロールできる。
💡 使いどころ
複雑な動き（A地点からB地点へ行き、回転してC地点へ戻るなど）を作りたい時。CSS Animationや動画編集で時間を制御したい時。
⚠️ 注意点・誤用
キーフレームを打ちすぎるとデータ量が増え、動きもカクカクして不自然になることがある。必要最小限のキーフレームで、補間（Interpolation）をうまく使うのがコツ。
具体例
- 0%（開始）：透明度0
- 50%（中間）：透明度1、サイズ1.2倍
- 100%（終了）：透明度1、サイズ1.0倍
出典・参考文献:
- Lasseter, J. (1987). Principles of traditional animation applied to 3D computer animation. Proceedings of SIGGRAPH '87, 35–44.
- W3C. (2013). CSS Animations Module Level 3. World Wide Web Consortium (W3C) Recommendation.
- Tidwell, J., Brewer, C., & Valencia, A. (2020). Designing Interfaces: Patterns for Effective Interaction Design (3rd ed.). O’Reilly Media.
関連する解説記事
関連する記事詳細が見つかりませんでした。