CSS CSS, , ,

CSSのtransitionプロパティは、transition-property、transition-duration、transition-timing-function、およびtransition-delayのショートハンドです。transition-propertyでは、特定のプロパティまたはすべての要素にallを使用してターゲットにすることができます。durationとdelayには秒またはミリ秒を使用します。タイミング関数は速度曲線を定義し、linearは一定速度、easeはゆっくり始まり速くなった後ゆっくり終わる、ease-inはゆっくり始まる、ease-outはゆっくり終わるという特性があります。カスタム曲線では、cubic-bezier(x1, y1, x2, y2)関数を使用し、4つの値で制御点を定義します。yの値が0-1の範囲外になると、アーバウンド/バウンド効果が発生します。パフォーマンスのため、可能な限りtransformとopacityのみに遷移を適用することが推奨されます。複数の遷移は、異なるプロパティに対して異なるタイミングでカンマ区切り値を定義することで実現できます。遷移は、JavaScriptによって設定された値やクラスの追加など、任意のプロパティ変更によってトリガーされます。