Hatena::ブログ(Diary)

webのべんきょうは実践。

2016年06月11日

transition

なんとなく使っていたtransitionについて調べてみる

参考サイト

CSS3プロパティ transition | HALAWATA.NET

.test {
 teansition: background-color 2s easing 0.5s;
}

値はそれぞれ、「変化させるプロパティ」、「変化にかける時間」、「イージング」、「変化が始まるまでの遅延させる時間」の4つになります。

将来的にはtransitionのみで動作させられるようになると思いますが、現時点では-o-や-moz-などのベンダープレフィックスをつけてやる必要があります。

  • 「変化させるプロパティ」は、当然ですがマウスオーバー前とマウスオーバー後で値を変えておかないとアニメーションしません。プロパティを複数指定したいときはカンマ区切りで指定します。すべて指定したい場合はallとします。初期値はallです。
  • 「変化にかける時間」は数値と単位で指定します。単位は秒(s)でもミリ秒(ms)でも可です。3秒なら3s、500ミリ秒なら500msになります。初期値は0(アニメーションなし)です。
  • イージングとは
  • ease(開始と終了が滑らか、初期値)
  • linear(一定)
  • ease-in(ゆっくり始まる)
  • ease-out(ゆっくり終わる)
  • ease-in-out(ゆっくり始まってゆっくり終わる)

個別にも指定できる

「変化させるプロパティ」はtransition-property、

「変化にかける時間」はtransition-duration、

「イージング」はtransition-timing-function、

「変化が始まるまでの遅延させる時間」はtransition-delay

によって指定します。