CSS linear イージング — 一定速度のトランジション

linearタイミング関数

linearキーワードはcubic-bezier(0, 0, 1, 1)にマッピングされ、(0, 0)から(1, 1)への直線的な対角線です。アニメーションは加速も減速もなく一定速度で進行します。

カーブ

transition-timing-function: linear;
/* 以下と同等: */
transition-timing-function: cubic-bezier(0, 0, 1, 1);

速度の変化がないため、linearは機械的に感じます。ほとんどのUIコンテキストではアニメーションが不自然に感じられるため、最良のデフォルトになることはめったにありません。

linearが効果的な場面

• プログレスバー: ローディングインジケータは進捗を正確に伝えるために一定速度で進むべきです。
• 無限回転: スピナーやローディングアイコンの連続回転は速度の変化があってはなりません。
• 色の循環: カラーパレットを段階的に変化させるには均等なタイミングが適しています。
• スクロールマーキー: テキストや画像のカルーセルが連続スクロールする場合。

コード例

.spinner {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

linearが異なって感じられる理由

人間の知覚は、オブジェクトがモーションに緩やかに入り、緩やかに出ることを期待します。テーブルの上を転がるボールは摩擦で減速し、車は瞬時にフルスピードに達しません。UI要素の移動（スライドイン、フェード）にlinearを使用すると、easeやease-in-outと比べて硬い印象になります。