今回ブログリニューアルで使用したプロパティtransitionについてまとめました。

transitionとは

  • :hoverなどで値が変化したときにスムーズに変化させることが出来る。
  • 値が元に戻ると、スムーズに戻る。

transition-property

変化を適応させるプロパティを指定できる 初期値はnone、allで変化できるプロパティすべてが変化する対象に指定できる。 変化させることが出来るプロパティは以下のリンクを参考に

CSS animatable properties ❧ Oli.jp (@boblet)

transition-duration

変化にかかる時間を指定 初期値は0, 一秒=1s、値が増えるほど変化にかかる時間が長くなる。

transition-timing-function

変化のタイミング、具合を調整

ease:開始と終了をなめらかに(初期値) ease-in:ゆっくり始まる ease-out:ゆっくり終わる ease-in-out:ゆっくり始まってゆっくり終わる linear:一定に変化する

transition-delay

変化がいつ始まるかを指定できる。 初期値は0、一秒なら1s、値が増えるほど始まるタイミングが遅くなる。

transitionの使用例

IEは10から対応しています。最新ブラウザはほぼ対応していますが、 iOS6以前、Androidはベンダープレフィックスが必要です。(2014/1/8現在)

上の指定だと0.5秒後にwidthが1秒かけて変化、変化はゆっくり始まって、ゆっくり終わります。

そして上記の4つのプロパティはひとまとめで書くことが出来ます。

先に指定した時間がdulation、後に指定した時間がdelayとして設定されます。