🫥
tailwindcss transition-opacityの簡単な使い方
はじめに
transitionを使えば、ふわっとしたアニメーションが簡単に実装できます。
transitionを使うことで、ワンランク上のデザインが作れます。
transition-opacityの使い方
単純に要素のopacityを変更するなら、transition-opacityを使います。
transition-opacityは内部的にこのように定義されています。
<button className="opacity-100 hover:opacity-0 transition-opacity">🖥️ ソフトウェア</button>
ふわっと消えていくアニメーションができました。
消えていく速度を変えたい場合は、duration-300などをclassNameに定義します。
背景色の場合
背景色のopacityを変える場合は、色のtransitionになるので、transition-colosを使います。
tailwindcssではこのように定義されています。
使い方としては、このようになります。
<button className="hover:bg-black hover:bg-opacity-5 transition-colors">🖥️ ソフトウェア</button>
他にも色々なtransitionがあります
Discussion