Tailwindのアニメーション：組み込みクラスとカスタムキーフレーム
Tailwindアニメーションガイド
Tailwindのアニメーション：組み込みクラスとカスタムキーフレーム | We.Inc
animate-spin、ping、pulse、bounceが動く様子とその正確なCSSを確認し、Tailwind v4の@themeでカスタムキーフレームを追加します。キーフレームビルダーと、動きを減らす設定への対応のコツ付きです。
Tailwindには4つの既製アニメーションがあります。読み込み表示用のanimate-spin、通知ドット用のanimate-ping、スケルトン画面用のanimate-pulse、スクロールを促す表示用のanimate-bounceです。止めるためのanimate-noneもあります。v4で独自のものを追加するには、@themeの中で--animate-name変数とその@keyframesを宣言します。するとanimate-nameクラスが作られます。
Tailwind v4の組み込みアニメーションユーティリティ
- spin 1s linear infinite
- 読み込み中のスピナー
- ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
- ライブ中や未読のバッジ
- pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
- スケルトンのプレースホルダー
- bounce 1s infinite
- 下へのスクロールを促す矢印
- animation: none
- ブレークポイントや状態に応じてアニメーションを止める
下の組み込みアニメーションはすべて実際に動いており、Tailwindが生成するキーフレームと並べて表示しています。そのうえでカスタムのものを作りましょう。動き、タイミング、繰り返し回数を選んで、Tailwind v4用の@themeブロック、または古いv3プロジェクト用の対応する設定をコピーできます。
- 4つの組み込みアニメーションを見て、必要なクラスをコピーします。
- 動きを減らす設定のプレビューを切り替えて、motion-safeとmotion-reduceの働きを確認します。
- キーフレームビルダーで、動き、再生時間、イージング、繰り返し回数を選びます。
- 生成された@themeブロックを、Tailwindを読み込んでいるCSSファイルに貼り付け、新しいクラスを使います。
- 装飾的な動きはmotion-safe:で囲みましょう。システムで動きを減らすよう設定している人には表示されなくなります。
- アニメーションさせるのは変形と不透明度にしましょう。幅、高さ、位置をアニメーションさせると、毎フレームでレイアウト計算が発生します。
- 一度きりの値にはanimate-[name_duration_easing]を使います。角かっこの中ではアンダースコアがスペースの代わりになります。
- ホバーや状態の変化には、キーフレームアニメーションよりトランジションのユーティリティのほうが通常は適しています。
- 登場アニメーションは150〜300ミリ秒程度と短くし、ページが遅く感じられないようにしましょう。
よくある質問
Tailwind v4でカスタムアニメーションを追加するには？
メインのCSSファイルの@themeの中で--animate-wiggle: wiggle 1s ease-in-out infinite;を宣言し、同じ@themeブロックに@keyframes wiggleのルールを書きます。するとTailwindがどこでも使えるanimate-wiggleクラスを生成します。
v4ではtailwind.config.jsのkeyframesはどこへ行ったのですか？
v4はCSSで設定するため、theme.extend.keyframesとtheme.extend.animationは、@themeの中の@keyframesと--animate-*変数になります。JavaScriptの設定も@configディレクティブで読み込めば引き続き使えるので、移行中に役立ちます。
アニメーションを1回だけ再生するには？
値からinfiniteを外し、要素を最後のフレームで止めたい場合はforwardsを追加します。例：--animate-fade-in: fade-in 0.3s ease-out forwards。一度きりならanimate-[fade-in_0.3s_ease-out_forwards]と書くこともできます。
Tailwindは動きを減らす設定に自動で対応しますか？
しません。motion-safe:とmotion-reduce:のバリアントはprefers-reduced-motionメディアクエリに対応していますが、自分で適用する必要があります。よく使われるのはmotion-safe:animate-bounceで、動きを減らす設定をしていない人にだけアニメーションします。
各組み込みアニメーションの用途
- スピンは要素を1秒ごとに1回転させ、円形の読み込み表示に向いています。ピンはドットの複製を2倍の大きさまで拡大しながらフェードアウトさせ、レーダーの波のように見せます。不透明なドットの後ろに、絶対配置のspanとして置きましょう。
- パルスは2秒かけて不透明度を半分まで下げて戻します。コンテンツの読み込み中に表示するグレーのスケルトンブロックの定番の見た目です。バウンスは要素を高さの4分の1だけ持ち上げて落とします。スクロールを促す1本の矢印には有効ですが、それ以外で使う場面はほとんどありません。
v4のカスタムキーフレーム
- Tailwind v4は設定をCSSに移しました。@themeの中の--animate-*名前空間にある変数はすべてanimate-*ユーティリティになり、同じブロック内に書いた@keyframesも一緒に出力されます。他に登録が必要なものはありません。
- 変数内の名前と@keyframesの名前は完全に一致させましょう。一致しないと、存在しないキーフレームを指すアニメーションを設定するクラスが作られ、何も動かず、エラーも出ません。
動きとアクセシビリティ
- 大きな動き、繰り返す動き、視差効果は、人によっては気分が悪くなる原因になります。OSには動きを減らす設定があり、ブラウザーはそれをprefers-reduced-motionとしてCSSに渡します。
- 状態を伝える読み込み表示は穏やかな動きを残してもかまいませんが、装飾的なバウンスや注意を引くための動きは止めるべきです。設定をオンにするか、ブラウザーの開発者ツールのエミュレーション機能でテストしましょう。
組み込みクラスの裏にあるCSS
Tailwind v4が生成するキーフレーム
各animate-*クラスはアニメーションにテーマ変数を設定します。これがデフォルトの値とキーフレームです。
v4とv3のカスタムアニメーション
Tailwind v4：CSSの中の@theme
これでanimate-wiggleとanimate-fade-upが作られます。すぐにクラス名として使えます。
まだv4に移行していないプロジェクト向けの、従来のJavaScript設定です。
マークアップでの使い方
任意の値、変数の参照、そしてシステムの設定に従うためのmotion-safe。
実際に動くカスタムキーフレーム
揺れ、フェードアップ、スケルトンカード
上のカスタムクラスと同等の素のCSSです。タイミングを編集して変化を確認できます。
組み込みアニメーションを実際に見る
各プレビューは実際のTailwindクラスを使っています。動きを減らす設定のプレビューをオンにすると、motion-safeの働きがわかります。
動きを減らすプレビュー：オン
動きを減らすプレビュー：オフ
キーフレームビルダー
動き、再生時間、イージング、繰り返し回数を選び、Tailwind v4用の@themeブロックをコピーします。
動き
再生時間：{n}ms
イージング
繰り返し
もう一度再生
Tailwind v4用のCSS
CSSをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る