昨夜は会社で寝てました。で起きました。
当然「え?え?え?どこ?いつ?なんじ?」な状態です。下山です。
最近頻繁に使うtransitionまとメモ。
transitionって?
指定したスタイルを別のスタイルへ滑らかに変化されるためのプロパティです。
例えばボタンにオンマウスで滑らかに背景色を変えるとかさ。
サンプル
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ul class="btn"> <li> <a href="#">ボタン1</a> </li> <li> <a href="#">ボタン2</a> </li> <li> <a href="#">ボタン3</a> </li> <li> <a href="#">ボタン4</a> </li> <li> <a href="#">ボタン5</a> </li> </ul> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
ul.btn li { list-style:none; float:left; margin-right:5px; } ul.btn li a { display:block; padding:10px 20px; text-align:center; text-decoration:none; border:1px solid #ccc; color:#fff; background:#000; -webkit-transition-property:background; -webkit-transition-duration:1s; -moz-transition-property:background; -moz-transition-duration:1s; -o-transition-property:background; -o-transition-duration:1s; transition-property:background; transition-duration:1s; } ul.btn li a:hover { background:#c00; } |
htmlはul liを使用してアンカーを並べているだけ。
CSSで横に並べてli内、aの背景色をhoverで赤に入れ替える。
とごく普通のスタイルですがtransition-propertyとtransition-durationを利用して滑らかに変化するようになります。
1 2 |
transition-property:滑らかに変化させたいプロパティ名; transition-duration:変化する時間(秒); |
こんな感じです。
ボクが日頃使うのはこの程度ですが、他にもtransition-timing-function(変化のパターン)やtransition-delay(遅延処理)もあります。
transition-timing-functionの値は以下の通り
1 2 3 4 5 |
ease /*ゆっくりから加速し減速(初期値)*/ linear /*速度一定*/ ease-in /*ゆっくりからの加速*/ ease-out /*速くからの減速*/ ease-in-out /*ゆっくりから加速、そして減速*/ |
transition一括指定
で、もちろん一括指定も可能です。
一括指定する場合はtransitionを使用します。
1 |
transition:滑らかに変化させたいプロパティ名,変化する時間(秒),遅延処理時間(秒),変化のパターン; |
という感じです。
上のコードを一括指定すると
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
ul.btn2 li { list-style:none; float:left; margin-right:5px; } ul.btn2 li a { display:block; padding:10px 20px; text-align:center; text-decoration:none; border:1px solid #ccc; color:#fff; background:#000; -webkit-transition:background 1s 0 ease; -moz-transition:background 1s 0 ease; -o-transition:background 1s 0 ease; transition:background 1s 0 ease; } ul.btn2 li a:hover { background:#c00; } |
となります。
demo
で当然のことながらIEは無理っ!(IE10ならOK)