transitionについて学習したことをまとめました。

transitionとは

ある要素の状態が変化する時、その変化が終わるまでの時間や緩急を指定できる。

とりあえず四角を用意する

index.html

<divclass="box"></div>

style.css

.box{height:100px;width:100px;background-color:red;}

:hoverした時に色を青色に変化させる

style.css

.box{height:100px;width:100px;background-color:red;}.box:hover{background:blue;}

現状では変化に間が無くて目がチカチカしてしまう

ここでtransitionの出番です

style.css

.box{height:100px;width:100px;background-color:red;transition:background-color3s;}.box:hover{background-color:blue;}

第2引数に指定した3秒かけて徐々に変化している

伸ばしたり丸めたりもできます
transition: width 3s;
transition: border-radius 3s;
と毎回指定するのが面倒なときはtransition: all 3s;でOK

style.css

.box{height:100px;width:100px;background-color:red;transition:all3s;}.box:hover{background-color:blue;width:500px;border-radius:50%;}

transitionの第3引数にeaseを取ることで緩急をつけられる

デベロッパーツールで色々イジれるのが楽しそうでした。

style.css

.box{height:100px;width:100px;background-color:red;transition:all3sease;}.box:hover{background-color:blue;width:500px;border-radius:50%;}

第4引数に変化までの遅延時間を設定できる

style.css

.box{height:100px;width:100px;background-color:red;transition:all3sease2s;}.box:hover{background-color:blue;width:500px;border-radius:50%;}

2秒待ったあとに変化が始まる