導入
Webサイトやアプリにおいて、要素の状態変化を滑らかにする「トランジション」は欠かせない演出です。しかし、ただ時間を指定するだけでは単調で機械的な動きになりがちです。transition-timing-functionを活用することで、動きに「加速」や「減速」といった加減速の曲線（イージング）を付与し、人間が直感的に心地よいと感じる自然な挙動を実現できます。本記事では、このプロパティの仕組みと、現場で使いこなすための実装ノウハウを解説します。
基礎知識
transition-timing-functionは、CSSのトランジション中における「中間値の計算方法」を指定するプロパティです。簡単に言うと「アニメーションの速度変化のグラフ」を定義するものです。
主な設定値には以下の種類があります。
キーワード値: ease（標準）、linear（一定速度）、ease-in（加速）、ease-out（減速）、ease-in-out（緩やかに開始して緩やかに終了）など、あらかじめ用意されたプリセットです。
cubic-bezier(): 4つの数値を指定して、独自の加速度曲線を自由に作成できます。
steps(): アニメーションを滑らかではなく、階段状（コマ送り）に変化させます。ボタンのホバーエフェクトや、パラパラ漫画のような動きを作りたい場合に有効です。
実装/解決策
現場での実装では、標準のeaseだけではなく、デザインの意図に合わせて最適なイージングを選択することが求められます。例えば、要素が「飛び込んでくる」ような演出ならease-outを使い、逆に「消えていく」場合はease-inを使うなど、物理法則に基づいた動きをシミュレートすることでUIの質感が向上します。
サンプルプログラム
以下のコードは、同じアニメーションに対して異なるイージングを適用した例です。比較することで動きの違いが明確にわかります。
応用・注意点
現場で最も注意すべきは「アクセシビリティ」です。派手な動きや高速なアニメーションは、前庭障害やてんかん、ADHDなどの特性を持つユーザーにとって、めまいや不快感を引き起こすトリガーになる可能性があります。
推奨される回避策:
可能な限り、OS側の設定を尊重しましょう。メディアクエリの prefers-reduced-motion を活用し、動きを抑える設定をしているユーザーに対しては、transitionを無効化するか、控えめなアニメーションに差し替える実装が、シニアデザイナーとして推奨する「配慮ある実装」です。
@media (prefers-reduced-motion: reduce) {
.box { transition: none; }
}
この一行を加えるだけで、UXの質は格段に高まります。ぜひ明日の開発から取り入れてみてください。
コメント