transitionのeaseとかease-in-outとか

2024年11月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は、今更ですがCSSのtransitionについて調べました。

transitionとは

transitionとは、要素にマウスカーソルを乗せたり（hover）ボタンを押したり（active）した時に何を変化させるか、どういうタイミング、スピードで変化させるか、を定義するものです。要は「ふわっと変化させる」時に使うやつです。

参考：MDN｜transition

参考：webliker｜CSSショートハンドのチートシート

a {
  color: blue;
  transition: all 2s ease;
}
a:hover {
  color: red;
}

こんな感じでいつも適当に設定していましたが、transitionには

transition-property（何を変化させるか）
transition-duration（何秒かけて変化させるか）
transition-timing-function（緩急）
transition-delay（開始を何秒遅らせるか）
transition-behavior（これよくわからん）

があるそうです。

上の例を別の書き方にすると、

a {
  color: blue;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-behavior: normal;
}
a:hover {
  color: red;
}

という感じでしょうか。

今回はこのうちtransition-timing-functionを比べてみようと思います。

初期値はeaseで「最初加速し、終了間際で減速」です。

transition-timing-function

親要素にマウスホバーしたら黄色い部分（child）の幅が3秒かけて親要素いっぱいまで伸びる、という風にしてみます。

<div class="parent">
  <div class="child ex1">ease</div>
</div>

.parent {
  position: relative;
  width: 100%;
  height: 50px;
  overflow: hidden;
  border: solid 1px #333;
  background-color: #333;
  cursor: pointer;
}
.child {
  position: absolute;
  left: 0;
  top: 0;
  width: 7rem;
  height: 100%;
  background-color: #ffc107;
  font-weight: 700;
  color: white;
  padding-left: 0.5rem;
  line-height: 50px;
}
.parent:hover .child {
  width: 100%;
}

① ease（加速して減速）

.ex1 {
  transition: width ease 3s;
}

② ease-in（徐々に加速）

.ex2 {
  transition: width ease-in 3s;
}

③ ease-out（徐々に減速）

.ex3 {
  transition: width ease-out 3s;
}

④ ease-in-out（easeよりもゆっくり加速してゆっくり減速）

.ex4 {
  transition: width ease-in-out 3s;
}

⑤ linear（等速）

.ex5 {
  transition: width linear 3s;
}

あんまり違いがわからない／(^o^)＼

他にもstep-start、step-endというのもあります。

また、steps()やcubic-bezier()という関数を使えば、さらに細かく動きを設定することができるようです。

まとめ

easeが一番速いように見えますね。