【Next.js】Tailwind でアニメーションを付ける方法
公開日: 2026年9月12日 · 読了目安 9 分
Next.js と Tailwind CSS だけで入場・ホバー・ループを付ける方法。framer-motion が要る境界、カスタム keyframes、完成セクションの流用。
先に結論：入場とホバーは Tailwind で足りる
多くの LP は、animate-in、delay、hover:scale、ゆっくりした loop で足ります。スクロール量に応じた変化や、共有レイアウトが要るときだけ Framer Motion を足します。導入は https://design-layer.com/articles/nextjs-framer-motion-guide です。
page をクライアントにする必要はありません。クラスを付けたマークアップのままです。
よく使う3種
入場：opacity と translate-y。delay を要素ごとにずらす。
ホバー：scale か brightness。影のアニメーションは重いです。
ループ：グラデーションやマーキー。linear の長い duration。
カスタム keyframes
tailwind.config か CSS の @theme に、短い keyframes を1つ足します。汎用の bounce をヒーローに使うと、LP らしくなくなります。
遅延入場の例
@keyframes rise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.rise-delay { animation-delay: 0.1s; }Tailwind だけでは届かないとき
スクロール位置、ピン留め、ドラッグ、レイアウトの共有。ここから先は JS です。完成している塊を載せる選択肢もあります。
DesignLayer は、ライブでその境界を見てから Copy できます。無料は1日3回です。https://design-layer.com/components
公開前
prefers-reduced-motion で animation: none。大きな loop はヒーロー1つ。モバイルで delay を短くする。