tailwindcss transition-opacityの簡単な使い方

この記事は公開から1年以上経過しています。内容が古くなっている可能性があります。

はじめに

transitionを使えば、ふわっとしたアニメーションが簡単に実装できます。
transitionを使うことで、ワンランク上のデザインが作れます。

単純に要素のopacityを変更するなら、transition-opacityを使います。
transition-opacityは内部的にこのように定義されています。

transition-opacityの定義

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

transition-opacityを適用したデザインサンプル
ふわっと消えていくアニメーションができました。
消えていく速度を変えたい場合は、duration-300などをclassNameに定義します。\

背景色のopacityを変える場合は、色のtransitionになるので、transition-colosを使います。
tailwindcssではこのように定義されています。

transition-colosの定義

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

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

transition-colorsを適用したデザインサンプル

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