プログラミング

transitionでトランジション関連のプロパティをまとめて指定【CSS】

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

{transition: プロパティ 開始までの時間 変化時間 進行度;}

transitionプロパティの値は、トランジション関連の各プロパティである、「transition-property」、「transition-delay」、「transition-duration」、「transition-timing-function」と同じで、それぞれ半角スペースで区切って指定します。

transition-delayプロパティとtransition-durationプロパティは順序が決まっています。

値を省略した場合は、各プロパティの初期値が適用されます。

{transition: all 1s 3s ease-in;}
マウスオーバーで背景色と文字色が変わります。

関連記事
transition-propertyでトランジションを適用するプロパティを指定【CSS】
transition-durationでトランジション完了までの時間を指定【CSS】
transition-timing-functionでトランジションの進行度を指定【CSS】
transition-delayでトランジションの変化開始までの時間を指定【CSS】

Leave a Comment