最終更新日

transitionプロパティ

transitionは、遷移関連プロパティをまとめて指定するショートハンドプロパティです。

transition-propertytransition-durationtransition-timing-functiontransition-delayの順番で、各プロパティの値を半角スペースで区切って並べます。

複数指定する場合は、値のセットをカンマで区切ります。

CSS3での変更点
・transitionは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
各プロパティの初期値 すべての要素、::before擬似要素セレクタ::after擬似要素セレクタ なし
説明
transition-propertyの値 遷移させるプロパティを指定します。
transition-durationの値 変化にかける時間を指定します。
transition-timing-functionの値 変化中の速度に緩急をつけます。
transition-delayの値 遷移の開始を遅らせます。
サンプルコード
transition: color 10s linear 5s;
transition: background-color 20s ease-in 8s;
transition: color 10s linear 5s, background-color 20s ease-in 8s;
参考文献:CSS Transitions外部リンク
HOME