【CSS】transitionプロパティについて【まとめ】

transitionプロパティについて学習したことをまとめました。

transitionとは

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

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

index.html

  <div class="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-color 3s;

}

.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: all 3s;
}

.box:hover {
  background-color: blue;
  width: 500px;
  border-radius: 50%;
}

緩急をつける

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

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

style.css

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

  transition: all 3s ease;

}

.box:hover {
  background-color: blue;
  width: 500px;
  border-radius: 50%;
}

遅延時間の設定

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

style.css

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

  transition: all 3s ease 2s;

}

.box:hover {
  background-color: blue;
  width: 500px;
  border-radius: 50%;
}

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