tailwindcss-transforms

Name: tailwindcss-transforms
Author: fusengine

github.com/fusengineデザイン・UI3444 回インストール2 週間前に更新

tailwindcss-transforms について

インターフェースをスタイリングする開発者向けの、Tailwind CSS v4.3 の変形・トランジション・アニメーションユーティリティのリファレンスです。ユーティリティの組み合わせ、パフォーマンス、動きを減らす設定へのアクセシビリティ対応を扱います。

主な機能

01変形ユーティリティのリファレンス
02トランジションのプロパティ・時間・イージング
03組み込みアニメーションとカスタムキーフレーム
04状態バリアントと動きの組み合わせ
05動きを減らす設定への配慮

活用シーン

01ホバー時の拡大効果の作成
02回転するローダーの作成
03遅延を使った段階的アニメーション

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/fusengine/claude-plugins --skill tailwindcss-transforms

インストール後、Claude Code で/tailwindcss-transformsを入力して読み込まれたか確認します。

詳細

Tailwind CSS v4.3 の transform、transition、animation ユーティリティの完全なリファレンスです。transform（`scale-*`、`rotate-*`、`translate-*`、`skew-*`、`origin-*`。加えて、v4.3 以降は関連する `zoom-*`）、transition（`transition-*` によるプロパティの指定、`duration-*`、`ease-*` によるタイミング関数、`delay-*`）、animation（組み込みの `animate-*` ユーティリティとカスタム `@keyframes`）を扱います。

transform、transition、animation の組み合わせ（ホバー時の拡大、スピナー、段階的な遅延）、パフォーマンスに関するガイダンス（transform／opacity の使用を推奨）、および必須の prefers-reduced-motion アクセシビリティ対応について説明します。

Tailwind CSS v4.3 の Transform と Animation

Tailwind CSS v4.3 の Transform、Transition、Animation ユーティリティの完全なリファレンスです。

Transform ユーティリティ

Scale

要素を拡大・縮小して変形します。


<div class="scale-50">50%</div>
<div class="scale-100">100%</div>
<div class="scale-125">125%</div>
<div class="scale-150">150%</div>
<div class="scale-x-50">Scale X only</div>
<div class="scale-y-75">Scale Y only</div>

レスポンシブ：sm:scale-125、md:scale-150、lg:scale-100 状態：hover:scale-110、focus:scale-105、group-hover:scale-125

Rotate

要素を角度に応じて回転させます。


<div class="rotate-0">0°</div>
<div class="rotate-45">45°</div>
<div class="rotate-90">90°</div>
<div class="rotate-180">180°</div>
<div class="-rotate-45">-45°</div>

レスポンシブ：sm:rotate-90、md:rotate-180、lg:rotate-0 状態：hover:rotate-45、focus:rotate-90

Translate

要素を X 軸および Y 軸に沿って移動させます。


<div class="translate-x-0">No translation</div>
<div class="translate-x-2">X direction</div>
<div class="translate-y-4">Y direction</div>
<div class="translate-x-6 translate-y-8">Both axes</div>
<div class="-translate-x-2">Negative X</div>
<div class="-translate-y-4">Negative Y</div>

レスポンシブ：sm:translate-x-4、md:translate-y-8 状態：hover:translate-y-2、focus:translate-x-1

Skew

要素を X 軸および Y 軸に沿って傾けます。


<div class="skew-x-3">Skew X</div>
<div class="skew-y-6">Skew Y</div>
<div class="skew-x-3 skew-y-6">Both skew</div>
<div class="-skew-x-3">Negative skew</div>

レスポンシブ：sm:skew-x-6、md:skew-y-3 状態：hover:skew-x-2、group-hover:skew-y-4

Transform の原点

transform 操作の原点を設定します。


<div class="origin-center">Default center</div>
<div class="origin-top">Top</div>
<div class="origin-bottom">Bottom</div>
<div class="origin-left">Left</div>
<div class="origin-right">Right</div>
<div class="origin-top-left">Top-left</div>
<div class="origin-top-right">Top-right</div>
<div class="origin-bottom-left">Bottom-left</div>
<div class="origin-bottom-right">Bottom-right</div>

レスポンシブ：sm:origin-top、md:origin-bottom-right 状態：hover:origin-left、focus:origin-center

Transition ユーティリティ

Transition のプロパティ

特定のプロパティの transition を有効にします。


<div class="transition">All properties</div>
<div class="transition-none">No transitions</div>
<div class="transition-all">All properties</div>
<div class="transition-colors">Color changes</div>
<div class="transition-opacity">Opacity changes</div>
<div class="transition-transform">Transform changes</div>
<div class="transition-shadow">Shadow changes</div>

レスポンシブ：sm:transition-colors、md:transition-transform 状態：hover:transition-all、focus:transition-opacity

Duration

transition または animation の継続時間を設定します。


<div class="duration-75">75ms</div>
<div class="duration-100">100ms</div>
<div class="duration-150">150ms</div>
<div class="duration-200">200ms</div>
<div class="duration-300">300ms</div>
<div class="duration-500">500ms</div>
<div class="duration-700">700ms</div>
<div class="duration-1000">1000ms</div>

レスポンシブ：sm:duration-200、md:duration-500 一般的な使用例：hover:duration-300、focus:duration-200

Timing Function（イージング）

transition または animation の加速曲線を制御します。


<div class="ease-linear">Linear</div>
<div class="ease-in">Ease in (slow start)</div>
<div class="ease-out">Ease out (slow end)</div>
<div class="ease-in-out">Ease in-out</div>

レスポンシブ：sm:ease-in、md:ease-out 状態：hover:ease-linear、focus:ease-in-out

Delay

transition または animation の開始前に遅延を追加します。


<div class="delay-0">0ms</div>
<div class="delay-75">75ms</div>
<div class="delay-100">100ms</div>
<div class="delay-150">150ms</div>
<div class="delay-200">200ms</div>
<div class="delay-300">300ms</div>
<div class="delay-500">500ms</div>
<div class="delay-700">700ms</div>
<div class="delay-1000">1000ms</div>

レスポンシブ：sm:delay-150、md:delay-300 段階的な遅延：animation に順番に遅延を設定します

Animation ユーティリティ

Animate

組み込みの animation またはカスタム @keyframes を適用します。


<div class="animate-none">No animation</div>
<div class="animate-spin">Rotating spinner</div>
<div class="animate-ping">Pulsing beacon</div>
<div class="animate-pulse">Fading pulse</div>
<div class="animate-bounce">Bouncing motion</div>

<div class="animate-wiggle">Wiggle motion</div>
<div class="animate-wave">Wave motion</div>

レスポンシブ：sm:animate-spin、md:animate-bounce レスポンシブな無効化：lg:animate-none

カスタム Keyframes

@keyframes を使ってカスタム animation を定義します。

/* In your CSS or Tailwind config */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

Transform、Transition、Animation の組み合わせ

例 1：Transition を使ったホバー時の拡大

<button class="scale-100 hover:scale-110 transition duration-200 ease-out">
  Hover me
</button>

例 2：Animation を使った回転ローダー

<div class="animate-spin">
  <svg class="w-8 h-8"></svg>
</div>

例 3：Delay を使った段階的な Animation

<div class="space-y-2">
  <div class="animate-pulse delay-0">Item 1</div>
  <div class="animate-pulse delay-150">Item 2</div>
  <div class="animate-pulse delay-300">Item 3</div>
</div>

例 4：複雑な Transform の組み合わせ

<div class="rotate-45 scale-110 translate-x-2 translate-y-4 transition-transform duration-500 ease-in-out">
  Complex transform
</div>

例 5：原点を基準にした拡大縮小

<div class="origin-bottom scale-100 hover:scale-150 transition-transform duration-300">
  Scale from bottom
</div>

ベストプラクティス

Transition に Duration を指定する：常に transition-* と duration-* を組み合わせます
滑らかにするためにイージングを追加する：自然な動きには ease-out または ease-in-out を使用します
モバイルファースト：基本の transform を適用し、大きな画面にはレスポンシブバリアントを使用します
パフォーマンス：最高のパフォーマンスを得るには、transform と opacity を使用します
アクセシビリティ：animation では prefers-reduced-motion に配慮します
状態バリアントを組み合わせる：hover:、focus:、group-hover: などの状態バリアントを使用します

パフォーマンスのヒント

位置指定には left／top ではなく transform を使用します
フェード効果には visibility ではなく opacity を使用します
width／height の変更より scale を優先します
animation は必要な場合にのみ適用します
段階的な効果には animation-delay を使用します
負荷の高い animation では will-change の使用を検討します

アクセシビリティに関する考慮事項

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

リソース

詳細リファレンス

transform.md - scale/rotate/translate/skew/origin または zoom-* の完全なクラスリファレンスが必要なときに読み込みます
transition.md - transition の property/duration/easing/delay の完全なクラスリファレンスが必要なときに読み込みます
animation.md - 組み込みアニメーションクラスの完全なリファレンスやカスタム @keyframes パターンが必要なときに読み込みます

Markdown 対応

ログインしてコメント

基本情報

作者: fusengine
リポジトリ: fusengine/claude-plugins
カテゴリ: デザイン・UI
インストール数: 44
GitHub スター: 34

問題を報告