“transition”プロパティ:遷移効果｜CSS－havin' a coffee break

＃

概要

初期値	“transition-property: all;” “transition-duration: 0s;” “transition-timing-function: ease;” “transition-delay: 0s;”
適用対象	すべての要素
継承	No
パーセント値	パーセント値は指定できません
計算値	一括指定が対象とする各プロパティの定義に依る
アニメーション	不可

“transition”プロパティは要素に適用されているプロパティの値が変化した時に適用される遷移効果に関する指定をする以下のプロパティの一括指定プロパティです。

“:hover”擬似クラスなどの擬似クラスやメディア・クエリ、スクリプトによって要素に適用されているスタイルの値が変化した際には通常は直ちに値の変更が反映されますが、遷移効果を適用すると緩やかに変更を反映することができます。

サンプルコード



div { transition: transform 3s ease-in-out 1s;}

＃

値

値	説明
“<single-transition>”値
<single-transition-property>	“transition-property”プロパティの値
none	“transition-property”プロパティの値
<time>	“transition-duration”プロパティ、“transition-delay”プロパティの値
<easing-function>	“transition-timing-function”プロパティの値
他の値
共通キーワード

必要な値をホワイトスペースで区切って記述することができ、初期値のままで良い値は省略できます。一部の値は記述される順序によって解釈のされ方が変わります。他の値は記述する順序は自由です。

“<time>”値は1個もしくは2個記述することができます。1個だけ記述された場合は遷移効果の所要時間を指定する“transition-duration”プロパティの値として扱われます。2個記述された場合は1個目が“transition-duration”プロパティの値として扱われ、2個目が遷移効果の遅延時間を指定する“transition-delay”プロパティの値として扱われます。

“<single-transition-property>”値と“none”はどちらか1個だけ記述できます。

＃

複数のプロパティの遷移効果を指定する

値のセットを“,(コンマ)”で区切って並べて記述することでプロパティごとに異なる遷移効果の設定を指定することができます。



transition:


〚1個目の“<single-transition-property>”値〛 〚1個目のプロパティの“<time>”値〛 〚1個目のプロパティの“<easing-function>”値〛 〚1個目のプロパティの“<time>”値〛,

〚2個目の“<single-transition-property>”値〛 〚2個目のプロパティの“<time>”値〛 〚2個目のプロパティの“<easing-function>”値〛 〚2個目のプロパティの“<time>”値〛,

〚3個目の“<single-transition-property>”値〛 〚3個目のプロパティの“<time>”値〛 〚3個目のプロパティの“<easing-function>”値〛 〚3個目のプロパティの“<time>”値〛,

...;