ANIMATION
アニメーション設定集
汎用的なアニメーションまとめ。効果的なアニメーションは、ユーザーにとって直感的なフィードバックの提供や、段階的な情報の提示をすることで、操作体験を向上させます。
アニメーションの構成要素
1
トリガーイベント
アニメーション開始のきっかけ
・ページ遷移
・ユーザー操作（Scrollなど）
・状態の変化（Hoverなど）
2
プロパティ
アニメーションの各種設定
・継続時間
・待機時間
・イージング,加速度
・移動量,方向
・透明度
・拡大縮小
・傾き,回転 など
動作はPCでご確認いただけます🙇
アニメーションの例
確認
透明度・拡大
確認
ぼかし
確認
移動量・方向
確認
イージング
確認
遅延(順序)
確認
回転
継続時間
transition
確認
200ms, 400ms, 600ms, 800ms, 1秒 で比較
待機時間
transition-delay
確認
200ms, 400ms, 600ms, 800ms, 1秒 で比較
イージング
Linear(等速)
確認
ease In(徐々に加速)
確認
ease Out(徐々に減速)
確認
ease InOut(加速して減速)
確認
移動量・方向
transform: translate()
見出し
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
確認
Y:5 → 0px (Up)
見出し
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
確認
X:-10 → 0px (Right)
見出し
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
確認
Y:10 → 0px (Up)
見出し
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
確認
X:-10 → 0px (Right)
