Animation

フェードトランジション

CSSトランジションを使用したフェードイン/アウト効果

フェードイン / アウト

opacity を使った基本的なフェード効果

transition-opacity duration-500

className="transition-opacity duration-500 opacity-100"

ホバーエフェクト

マウスオーバーで変化するトランジション

hover:bg-brand-700

opacity-70 hover:opacity-100

スケールトランジション

scale を使った拡大/縮小効果

transition-transform

スライドトランジション

translate を使った移動効果

translate-x

複合トランジション

transition-all で複数のプロパティを同時に変化

hover で複数変化
(scale + bg + shadow)

Next Steps

次のステップ

React Hooks を使った状態管理を学んでみましょう。