tailwindcss transition-opacityの簡単な使い方

transitionを使えば、ふわっとしたアニメーションが簡単に実装できます。

transitionを使うことで、ワンランク上のデザインが作れます。

単純に要素のopacityを変更するなら、transition-opacityを使います。

transition-opacityは内部的にこのように定義されています。

https://scrapbox.io/files/676b65194f54bae44e6df6e6.png

code:index.tsx

<button className="opacity-100 hover:opacity-0 transition-opacity">🖥️ ソフトウェア</button>

https://scrapbox.io/files/676b66c8140728396078e191.gif

ふわっと消えていくアニメーションができました。

消えていく速度を変えたい場合は、duration-300などをclassNameに定義します。

? 背景色の場合

背景色のopacityを変える場合は、色のtransitionになるので、transition-colosを使います。

tailwindcssではこのように定義されています。

https://scrapbox.io/files/676b658f5daa12daf095ae10.png

使い方としては、このようになります。

code:index.tsx

<button className="hover:bg-black hover:bg-opacity-5 transition-colors">🖥️ ソフトウェア</button>

https://scrapbox.io/files/676b649c17ccacda6c0ceaf6.gif

他にも色々なtransitionがあります