ブログトップ >  ✔ デザイン関連 > WEB知識 > CSS:transition

CSS:transition

transition(トランジション)は変化するまでの時間を設定するプロパティです。

transitionプロパティの値に下記の順番で各値を指定します。

  • transition-propertyの値:効果を適用するプロパティ名を指定(all,none,プロパティ名)
  • transition-durationの値:変化に掛かる時間を指定(0,1s)
  • transition-timing-functionの値:変化のタイミングを指定(ease,linear,ease-in,ease-out,ease-in-out,cubic-bezier(数値, 数値, 数値, 数値))
  • transition-delayの値:変化がいつ始まるかを指定(0,1s)

各値は半角スペースを空けて連続で記述します。

セレクタ名 {
transition:transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値;
}
表示できるブラウザ

IE10以上から対応

参考にさせていただきました。

http://www.htmq.com/css3/transition-property.shtml


monbzi