tailwind-animations

tailwind-animations（利用者向けスキル）

ユーザーが自分のアプリで tailwind-animations パッケージを使うためのサポートをします。このスキルはプラグインのモノレポへの貢献を目的としたものではありません。

パッケージ： Tailwind CSS v4 向けの CSS のみのユーティリティ（ピア依存関係：任意の tailwindcss@4）。
サイト／デモ： https://tailwind-animations.com
プレイグラウンド（組み合わせて URL を共有）： https://tailwind-animations.com/playground/
エージェント向けドキュメント（Markdown を推奨）： https://tailwind-animations.com/llms-full.md

適用する場面

• Tailwind クラスで開始／終了／注意喚起アニメーションを追加するとき
• npm install の後に tailwind-animations を設定するとき
• ネイティブな <dialog> の開閉をアニメーション化するとき
• スクロールまたはビュー駆動の CSS アニメーションを使うとき
• オーバーフロー／スクロールコンテナーの端をフェードするとき（scroll-mask-*）
• スライド距離、長さ、遅延、ステップ数、反復回数、塗りつぶしモードをカスタマイズするとき

利用するプロジェクトへのインストール

npm install tailwind-animations
# pnpm add tailwind-animations
# yarn add tailwind-animations

/* globals.css / app.css — Tailwind v4 */
@import "tailwindcss";
@import "tailwind-animations";

要件： Tailwind CSS v4。
旧 Tailwind v3： @midudev/[email protected]（非推奨。API が異なります）。

JS プラグインは登録しないでください。このパッケージは CSS のみで構成されています。

基本的な使い方

アニメーション名に animate- を付けます。

<div class="animate-fade-in">Hello</div>

<div class="animate-slide-in-bottom animate-delay-300 animate-duration-slow">
  Slow delayed entrance
</div>

<div class="animate-slide-in-left animate-slide-distance-[6rem]">
  Custom travel distance
</div>

モディファイアの組み合わせ

目的	クラス
長さ	animate-duration-faster|fast|normal|slow|slower または animate-duration-100…1000 または animate-duration-[777ms]
遅延	animate-delay-0…1000、none、または任意の値
ステップ数（レトロな雰囲気）	animate-steps-none|retro|normal|modern
反復回数	animate-iteration-count-once|twice|thrice|infinite|none
塗りつぶしモード	animate-fill-mode-none|forwards|backwards|both
イージング	animate-ease、animate-ease-in、animate-ease-out、animate-ease-in-out、animate-linear
ベジェプリセット	animate-bezier-sine-in、animate-bezier-quad-out、animate-bezier-back-in-out、…
再生方向	animate-direction-normal|reverse|alternate|alternate-reverse
再生状態	animate-play-running、animate-play-paused
スライド距離	animate-slide-distance-[50%]、animate-slide-distance-[6rem]（デフォルトの移動距離は 20px）

ダイアログ（ネイティブな <dialog>）

<button type="button" commandfor="demo" command="show-modal">Open</button>

<dialog
  id="demo"
  class="animate-dialog animate-dialog-from-top animate-dialog-duration-fast m-auto max-w-lg rounded-2xl p-6"
>
  <p>Content</p>
  <button type="button" commandfor="demo" command="request-close">Close</button>
</dialog>

ほかにも、animate-dialog-fade、animate-dialog-zoom、animate-dialog-from-bottom|left|right、animate-dialog-duration-* があります。

スクロール／ビュ―タイムライン

<div class="timeline-scroll animate-rotate-360">Rotates while scrolling</div>

<div class="animate-zoom-in timeline-view animate-range-entry">
  Plays as it enters the viewport
</div>

スクロールマスク（オーバーフロー領域の端をフェード）

animation-timeline: scroll() によって動作する、CSS のみのエッジフェードです。スクロールコンテナーに適用します（オーバーフローが必要です）。

<ul class="scroll-mask-y max-h-64 overflow-y-auto">…</ul>


<div class="scroll-mask-x flex overflow-x-auto">…</div>


<div class="scroll-mask-b-from-80% overflow-y-auto">…</div>
<div class="scroll-mask-x-from-90% overflow-x-auto">…</div>
<div class="scroll-mask-r-from-[calc(100%-2rem)] overflow-x-auto">…</div>

目的	クラス
四辺すべて	scroll-mask、scroll-mask-from-*
垂直方向	scroll-mask-y、scroll-mask-y-from-*
水平方向	scroll-mask-x、scroll-mask-x-from-*
片側	scroll-mask-t|b|l|r、scroll-mask-t-from-*（など）

デフォルトのフェード位置は 80% です（80% までは不透明で、その後端に向かって透明になります）。animation-timeline: scroll() のブラウザー対応が必要です。

アニメーションカタログ（79）

animate-{name} として使用します：

blink、blurred-fade-in、bounce-fade-in、bouncing、contract-horizontally、contract-vertically、dancing、expand-horizontally、expand-vertically、fade-in、fade-in-down、fade-in-left、fade-in-right、fade-in-up、fade-out、fade-out-down、fade-out-left、fade-out-right、fade-out-up、flash、flip-horizontal、flip-in-x、flip-in-y、flip-out-x、flip-out-y、flip-vertical、flip-x、flip-y、float、hang、heartbeat、horizontal-bounce、horizontal-vibration、impulse-rotation-left、impulse-rotation-right、jelly、jiggle、jump、pop、pulse、pulse-fade-in、pulsing、roll-in、roll-out、rotate-180、rotate-360、rotate-90、rotate-in、rotate-out、rotational-wave、rubber-band、scale、shake、sink、skew、skew-right、slide-in-bottom、slide-in-left、slide-in-right、slide-in-top、slide-out-bottom、slide-out-left、slide-out-right、slide-out-top、slide-rotate-in、slide-rotate-out、slide-up-fade、spin-clockwise、spin-counter-clockwise、squeeze、sway、swing、swing-drop-in、tada、tilt、vertical-bounce、wobble、zoom-in、zoom-out

Playground（探索用）

https://tailwind-animations.com/playground/

共有可能なクエリパラメーター：a（アニメーション）、d（再生時間）、delay、s（ステップ数）、i（反復回数）、f（フィル）、p（プリセット：box|button|card|text）。

例：
https://tailwind-animations.com/playground/?a=jelly&d=700&delay=100&i=infinite&p=card

エージェント向けドキュメントサイトの読み込み

HTML のスクレイピングより Markdown を優先してください。

• https://tailwind-animations.com/llm.txt
• https://tailwind-animations.com/index.md
• https://tailwind-animations.com/playground.md
• https://tailwind-animations.com/llms-full.md
• https://tailwind-animations.com/llms.txt

ベストプラクティス

1. transform + opacity のアニメーション（カタログの大半）を優先してください。
2. blurred-fade-in（filter: blur）はモバイルで負荷が高くなるものとして扱ってください。
3. 無限ループ（pulse、horizontal-vibration、rotational-wave、…）は動きが続くため、控えめに使用してください。ホストアプリでは prefers-reduced-motion を尊重してください。
4. transform ユーティリティがある場合は、レイアウトプロパティ（width、height、top）をアニメーションさせないでください。
5. Tailwind では任意の値を使用できます：animate-duration-[1.2s]、animate-slide-distance-[10rem]。

アンチパターン

• このパッケージ用の JS Tailwind プラグインをインストールする（v1 には存在しません）。
• Tailwind v3 で最新のパッケージを使用する（代わりに @midudev/[email protected] を使用してください）。
• ドキュメントや playground を確認せず、カタログにないクラス名を考案する。
• このスキルをモノレポのコントリビューター向けワークフローと混同する（対象外です）。

手早く使えるレシピ

リストを段階的に表示

<li class="animate-fade-in-up animate-delay-100">…</li>
<li class="animate-fade-in-up animate-delay-200">…</li>
<li class="animate-fade-in-up animate-delay-300">…</li>

一度だけ注意を引く

<span class="animate-tada animate-iteration-count-once">Saved!</span>

モーダル

<dialog class="animate-dialog animate-dialog-zoom animate-dialog-duration-normal">…</dialog>

端をフェードさせるスクロール可能なパネル

<div class="scroll-mask-y max-h-80 overflow-y-auto rounded-xl border p-4">
  …
</div>