TailwindCSSだと.transition-colorsにあたる。

割り当てられたCSSを見てみるとこんな感じ

.transition-all {
	transition-property: background-color, border-color, color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

• transition-property

変化対象を設定するプロパティで初期値はall

• transition-timing-function

イージング。変化方法の設定

linear: 一定

ease-in: 徐々に早くなる

steps(num, end): 段階的に

cubic-bezier(num, num, num, num) : 数値で作成された3字ベジェ曲線　0~1の範囲内

• transition-duration

変化にかかる時間を設定。初期値は0で未設定ではアニメーションはなし

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

https://01earth.jp/web-create/transition/

TOP PAGE