tailwindcss-animations
Tailwind CSSのアニメーションとトランジションに関するスキルで、組み込みユーティリティからカスタムキーフレームまで幅広くサポートします。`animate-*`ユーティリティ、`@keyframes`のカスタム定義、トランジション・トランスフォーム、`prefers-reduced-motion`対応、Framer Motion / Motion Oneとの連携、スクロール駆動アニメーション、View Transitions API、ホバー・フォーカス時のトランジション、スタッガードリストアニメーションなど、あらゆる動きの実装で積極的に活用されます。アニメーションユーティリティのリファレンス、カスタムキーフレームのサンプル、アクセシビリティ対応パターン、スクロール連動アニメーションのレシピを提供します。
description の原文を見る
Tailwind CSS animations and transitions including built-in utilities and custom keyframes. PROACTIVELY activate for: (1) animate-* utilities (spin, ping, pulse, bounce), (2) custom @keyframes via @theme animate, (3) transition utilities (transition, duration, ease), (4) transforms (scale, rotate, translate) with transition, (5) prefers-reduced-motion: reduce, (6) Framer Motion / Motion One integration with Tailwind, (7) CSS scroll-driven animations (animation-timeline), (8) view transitions API with Tailwind, (9) hover, focus, group-hover transitions, (10) staggered list animations. Provides: animation utility reference, custom keyframe examples, reduced-motion pattern, Framer Motion integration, and scroll-driven animation recipes.
SKILL.md 本文
Tailwind CSS アニメーション & トランジション
ビルトインアニメーション
Spin
ローディングインジケーター用の連続回転:
<svg class="animate-spin h-5 w-5 text-blue-500" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
</svg>
Ping
通知用のレーダースタイルパルス:
<span class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>
</span>
Pulse
スケルトンローダー用の控えめなフェード:
<div class="animate-pulse flex space-x-4">
<div class="rounded-full bg-slate-200 h-10 w-10"></div>
<div class="flex-1 space-y-2 py-1">
<div class="h-2 bg-slate-200 rounded"></div>
<div class="h-2 bg-slate-200 rounded w-5/6"></div>
</div>
</div>
Bounce
注目を集める垂直バウンス:
<svg class="animate-bounce w-6 h-6 text-blue-500" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
トランジション
トランジションプロパティ
| クラス | CSSプロパティ |
|---|---|
transition-none | なし |
transition-all | すべてのプロパティ |
transition | 一般的なプロパティ |
transition-colors | 色のみ |
transition-opacity | 不透明度のみ |
transition-shadow | 影のみ |
transition-transform | 変形のみ |
トランジション期間
| クラス | 期間 |
|---|---|
duration-75 | 75ms |
duration-100 | 100ms |
duration-150 | 150ms |
duration-200 | 200ms |
duration-300 | 300ms |
duration-500 | 500ms |
duration-700 | 700ms |
duration-1000 | 1000ms |
トランジションタイミング関数
| クラス | イージング |
|---|---|
ease-linear | リニア |
ease-in | 加速 |
ease-out | 減速 |
ease-in-out | 加速後に減速 |
トランジション遅延
| クラス | 遅延 |
|---|---|
delay-75 | 75ms |
delay-100 | 100ms |
delay-150 | 150ms |
delay-200 | 200ms |
delay-300 | 300ms |
delay-500 | 500ms |
基本的なトランジション例
<!-- 色のトランジション -->
<button class="bg-blue-500 hover:bg-blue-700 transition-colors duration-200">
ホバーしてください
</button>
<!-- ホバー時のスケール -->
<div class="transform hover:scale-105 transition-transform duration-200">
カード
</div>
<!-- 不透明度のトランジション -->
<div class="opacity-100 hover:opacity-75 transition-opacity duration-150">
フェード
</div>
<!-- 複数のプロパティ -->
<button class="
bg-blue-500 hover:bg-blue-700
transform hover:scale-105
shadow-md hover:shadow-lg
transition-all duration-200
">
フルトランジション
</button>
変形ユーティリティ
スケール
<div class="transform scale-100 hover:scale-110 transition-transform">
拡大
</div>
<div class="transform scale-100 hover:scale-90 transition-transform">
縮小
</div>
<!-- 特定の軸 -->
<div class="transform hover:scale-x-110">水平</div>
<div class="transform hover:scale-y-110">垂直</div>
回転
<div class="transform hover:rotate-12 transition-transform">
右回転
</div>
<div class="transform hover:-rotate-12 transition-transform">
左回転
</div>
<div class="transform hover:rotate-180 transition-transform duration-500">
反転
</div>
移動
<div class="transform hover:translate-x-2 transition-transform">
右に移動
</div>
<div class="transform hover:-translate-y-2 transition-transform">
上に移動
</div>
スキュー
<div class="transform hover:skew-x-3 transition-transform">
水平スキュー
</div>
<div class="transform hover:skew-y-3 transition-transform">
垂直スキュー
</div>
変形の原点
<div class="origin-center transform hover:rotate-45">中央（デフォルト）</div>
<div class="origin-top-left transform hover:rotate-45">左上</div>
<div class="origin-bottom-right transform hover:rotate-45">右下</div>
カスタムアニメーション (v4)
@theme で定義
@theme {
/* カスタムキーフレーム */
--animate-fade-in: fade-in 0.5s ease-out;
--animate-slide-up: slide-up 0.3s ease-out;
--animate-shake: shake 0.5s ease-in-out;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slide-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
使用方法
<div class="animate-fade-in">フェードイン</div>
<div class="animate-slide-up">スライドアップ</div>
<div class="animate-shake">エラー時に振動</div>
カスタムイージング
@theme {
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
<div class="transition-transform ease-bounce duration-300 hover:scale-110">
バウンシースケール
</div>
アクセシビリティ: 減速モーション
motion-safe / motion-reduce
<!-- ユーザーがモーションを好む場合のみアニメート -->
<div class="motion-safe:animate-bounce motion-reduce:animate-none">
ユーザー設定を尊重
</div>
<!-- 代替案: 減速アニメーション -->
<button class="
motion-safe:transition-all motion-safe:duration-200
motion-reduce:transition-none
hover:bg-blue-600
">
アクセシブルボタン
</button>
減速モーションパターン
/* グローバル適用 */
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
一般的なアニメーションパターン
ホバーカードリフト
<div class="
transform transition-all duration-200
hover:-translate-y-1 hover:shadow-lg
bg-white rounded-lg p-6 shadow
">
カード内容
</div>
ボタンプレスエフェクト
<button class="
transform transition-transform duration-100
active:scale-95
bg-blue-500 text-white px-4 py-2 rounded
">
クリック
</button>
ローディングドット
<div class="flex space-x-1">
<div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce [animation-delay:-0.3s]"></div>
<div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce [animation-delay:-0.15s]"></div>
<div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce"></div>
</div>
スクロール時のフェードイン (JS付き)
<div class="opacity-0 translate-y-4 transition-all duration-500" data-animate>
フェードインするコンテンツ
</div>
// Intersection Observerでアニメーションをトリガー
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.remove('opacity-0', 'translate-y-4')
}
})
})
document.querySelectorAll('[data-animate]').forEach(el => observer.observe(el))
スケルトンローダー
<div class="animate-pulse">
<div class="h-4 bg-gray-200 rounded w-3/4 mb-4"></div>
<div class="h-4 bg-gray-200 rounded w-1/2 mb-4"></div>
<div class="h-4 bg-gray-200 rounded w-5/6"></div>
</div>
ハンバーガーメニューからX字への変形
<button class="group" aria-label="メニューを切り替え">
<span class="block w-6 h-0.5 bg-black transition-all duration-200 group-open:rotate-45 group-open:translate-y-1.5"></span>
<span class="block w-6 h-0.5 bg-black mt-1 transition-opacity duration-200 group-open:opacity-0"></span>
<span class="block w-6 h-0.5 bg-black mt-1 transition-all duration-200 group-open:-rotate-45 group-open:-translate-y-1.5"></span>
</button>
入場/退場時のトランジション (JS付き)
複雑な入場/退場トランジションの場合は、Headless UI のようなライブラリを使用してください:
import { Transition } from '@headlessui/react'
function Modal({ isOpen, children }) {
return (
<Transition
show={isOpen}
enter="transition-opacity duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
{children}
</Transition>
)
}
パフォーマンスのコツ
1. GPU アクセラレーション対応プロパティを優先
<!-- 良い例 - GPU アクセラレーション対応 -->
<div class="transform hover:translate-x-2 transition-transform">
<!-- 避けるべき - リペイントが発生する可能性 -->
<div class="hover:left-2 transition-all">
2. 特定のトランジションを使用
<!-- 良い例 - 変更部分のみをトランジション -->
<div class="transition-colors duration-200 hover:bg-blue-500">
<!-- 避けるべき - すべてをトランジション -->
<div class="transition-all duration-200 hover:bg-blue-500">
3. アニメーションを短くする
<!-- 良い例 - キビキビしたフィードバック -->
<button class="transition-colors duration-150">
<!-- 避けるべき - UI フィードバックには遅すぎる -->
<button class="transition-colors duration-1000">
4. will-change は控えめに使用
<!-- 複雑で頻繁にアニメーションされる要素のみ -->
<div class="will-change-transform animate-spin">
ローディングスピナー
</div>
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- josiahsiegel
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/josiahsiegel/claude-plugin-marketplace / ライセンス: MIT
関連スキル
doubt-driven-development
重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。
apprun-skills
TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。
desloppify
コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。
debugging-and-error-recovery
テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。
test-driven-development
テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。
incremental-implementation
変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。