ウェブのあれこれ
ウェブを活用したいひとのためのブログ
CSSのプロパティの変化を時間を指定するtransition
2016/02/02 HTML/CSS

CSSのプロパティの変化を時間を指定するtransition

:hoverなどの疑似クラスを利用してCSSのプロパティ値を変更させるとき、transitionを利用して時間経過で除々にプロパティ値を変化させることができあます。

transitionのプロパティは4つ

transition-duration

transition-duration:1s;
変化にかかる時間を秒単位で指定します(1s、0.5sなど)。

transition-property

transition-property:background-color, width, height;
transitionの効果を適用するプロパティを指定します。
適用するプロパティ名をカンマ区切りで記述することで複数指定できます。
「all」としていすれば、transitionが適用できるプロパティすべてが対象となります。

transition-delay

transition-delay:1s;
transitionの変化が始まる時間を指定します。
transition-delayに指定した時間経過後にプロパティ値が変化し始めます。

transition-timing-function

transition-timing-function:ease;
transitionで変化するタイミングなどを指定します。

指定できる値は以下の通り
ease
 開始と終了が滑らかに変化
linear
 一定の間隔で変化
ease-in
 ゆっくりと変化が始まる
ease-out
 ゆっくりと変化が終わる
ease-in-out
 ゆっくり始まり、ゆっくり終わる

また、上記以外にcubic-bezier関数で変化量を指定することもできます。

ボタンやリンク要素などに最適

ボタンやリンクなどはマウスオーバーでプロパティを変化させることが多いですよね。transitionを活用すれば、CSSのみでマウスオーバーのアニメーションを実現できます。ぜひ試してみてください。
Provided by Revolme inc.
revolme.co.jp