Tailwind CSS动画与过渡效果教程 - 内置动画、变换工具类完整指南

tailwindcss-animations by josiahsiegel/claude-plugin-marketplace

1,200 周安装量

21 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill tailwindcss-animations

开发设计

🇨🇳中文介绍

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>

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

类名	CSS 属性
`transition-none`	无
`transition-all`	所有属性
`transition`	常用属性
`transition-colors`	仅颜色
`transition-opacity`	仅透明度
`transition-shadow`	仅阴影
`transition-transform`	仅变换

类名	缓动效果
`ease-linear`	线性
`ease-in`	加速
`ease-out`	减速
`ease-in-out`	先加速后减速

自定义动画 (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>

滚动淡入 (配合 JavaScript)

<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>

进入/离开过渡 (配合 JavaScript)

对于复杂的进入/离开过渡，使用像 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>

🇺🇸English

Tailwind CSS Animations & Transitions

Built-in Animations

Spin

Continuous rotation for loading indicators:

<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

Radar-style pulse for notifications:

<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

Subtle fade for skeleton loaders:

<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

Attention-grabbing vertical 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>

Transitions

Transition Properties

Class	CSS Property
`transition-none`	None
`transition-all`	All properties
`transition`	Common properties
`transition-colors`	Colors only
`transition-opacity`	Opacity only
`transition-shadow`	Shadow only

Transition Duration

Class	Duration
`duration-75`	75ms
`duration-100`	100ms
`duration-150`	150ms
`duration-200`	200ms
`duration-300`	300ms
`duration-500`	500ms

Transition Timing Functions

Class	Easing
`ease-linear`	Linear
`ease-in`	Accelerate
`ease-out`	Decelerate
`ease-in-out`	Accelerate then decelerate

Transition Delay

Class	Delay
`delay-75`	75ms
`delay-100`	100ms
`delay-150`	150ms
`delay-200`	200ms
`delay-300`	300ms
`delay-500`	500ms

Basic Transition Examples

<!-- Color transition -->
<button class="bg-blue-500 hover:bg-blue-700 transition-colors duration-200">
  Hover me
</button>

<!-- Scale on hover -->
<div class="transform hover:scale-105 transition-transform duration-200">
  Card
</div>

<!-- Opacity transition -->
<div class="opacity-100 hover:opacity-75 transition-opacity duration-150">
  Fade
</div>

<!-- Multiple properties -->
<button class="
  bg-blue-500 hover:bg-blue-700
  transform hover:scale-105
  shadow-md hover:shadow-lg
  transition-all duration-200
">
  Full transition
</button>

Transform Utilities

Scale

<div class="transform scale-100 hover:scale-110 transition-transform">
  Scale up
</div>

<div class="transform scale-100 hover:scale-90 transition-transform">
  Scale down
</div>

<!-- Specific axes -->
<div class="transform hover:scale-x-110">Horizontal</div>
<div class="transform hover:scale-y-110">Vertical</div>

Rotate

<div class="transform hover:rotate-12 transition-transform">
  Rotate right
</div>

<div class="transform hover:-rotate-12 transition-transform">
  Rotate left
</div>

<div class="transform hover:rotate-180 transition-transform duration-500">
  Flip
</div>

Translate

<div class="transform hover:translate-x-2 transition-transform">
  Move right
</div>

<div class="transform hover:-translate-y-2 transition-transform">
  Move up
</div>

Skew

<div class="transform hover:skew-x-3 transition-transform">
  Skew horizontal
</div>

<div class="transform hover:skew-y-3 transition-transform">
  Skew vertical
</div>

Transform Origin

<div class="origin-center transform hover:rotate-45">Center (default)</div>
<div class="origin-top-left transform hover:rotate-45">Top left</div>
<div class="origin-bottom-right transform hover:rotate-45">Bottom right</div>

Custom Animations (v4)

Define in @theme

@theme {
  /* Custom keyframes */
  --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); }
}

Usage

<div class="animate-fade-in">Fades in</div>
<div class="animate-slide-up">Slides up</div>
<div class="animate-shake">Shakes on error</div>

Custom Easing

@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">
  Bouncy scale
</div>

Accessibility: Reduced Motion

motion-safe / motion-reduce

<!-- Only animate if user prefers motion -->
<div class="motion-safe:animate-bounce motion-reduce:animate-none">
  Respects preferences
</div>

<!-- Alternative: reduced animation -->
<button class="
  motion-safe:transition-all motion-safe:duration-200
  motion-reduce:transition-none
  hover:bg-blue-600
">
  Accessible button
</button>

Reduced Motion Pattern

/* Apply globally */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Common Animation Patterns

Hover Card Lift

<div class="
  transform transition-all duration-200
  hover:-translate-y-1 hover:shadow-lg
  bg-white rounded-lg p-6 shadow
">
  Card content
</div>

Button Press Effect

<button class="
  transform transition-transform duration-100
  active:scale-95
  bg-blue-500 text-white px-4 py-2 rounded
">
  Click me
</button>

Loading Dots

<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>

Fade In on Scroll (with JS)

<div class="opacity-0 translate-y-4 transition-all duration-500" data-animate>
  Content that fades in
</div>



// Intersection Observer to trigger animation
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))

Skeleton Loader

<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>

Hamburger to X Animation

<button class="group" aria-label="Toggle menu">
  <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>

Transition on Enter/Leave (with JS)

For complex enter/leave transitions, use a library like 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>
  )
}

Performance Tips

1. Prefer GPU-Accelerated Properties

<!-- GOOD - GPU accelerated -->
<div class="transform hover:translate-x-2 transition-transform">

<!-- AVOID - May cause repaints -->
<div class="hover:left-2 transition-all">

2. Use Specific Transitions

<!-- GOOD - Only transitions what changes -->
<div class="transition-colors duration-200 hover:bg-blue-500">

<!-- AVOID - Transitions everything -->
<div class="transition-all duration-200 hover:bg-blue-500">

3. Keep Animations Short

<!-- GOOD - Snappy feedback -->
<button class="transition-colors duration-150">

<!-- AVOID - Too slow for UI feedback -->
<button class="transition-colors duration-1000">

4. Use will-change Sparingly

<!-- Only for complex, frequently animated elements -->
<div class="will-change-transform animate-spin">
  Loading spinner
</div>

Weekly Installs

1.1K

Repository

josiahsiegel/cl…ketplace

GitHub Stars

First Seen

Jan 20, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode981

gemini-cli955

codex932

github-copilot899

cursor853

kimi-cli760

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

102,200 周安装

Tailwind CSS动画与过渡效果教程 - 内置动画、变换工具类完整指南

🇨🇳中文介绍

Tailwind CSS 动画与过渡效果

内置动画

旋转 (Spin)

脉冲 (Ping)

脉动 (Pulse)

相关 Skills

弹跳 (Bounce)

过渡效果

过渡属性

过渡时长

过渡缓动函数

过渡延迟

基础过渡示例

变换工具类

缩放

旋转

平移

倾斜

变换原点

自定义动画 (v4)

在 @theme 中定义

使用方式

自定义缓动函数

无障碍性：减少动画

motion-safe / motion-reduce

减少动画模式

常见动画模式

悬停卡片上浮

按钮按压效果

加载点动画

滚动淡入 (配合 JavaScript)

骨架屏加载器

汉堡菜单到 X 动画

进入/离开过渡 (配合 JavaScript)

性能优化建议

1. 优先使用 GPU 加速属性

2. 使用特定过渡

3. 保持动画简短

4. 谨慎使用 will-change

🇺🇸English

Tailwind CSS Animations & Transitions

Built-in Animations

Spin

Ping

Pulse

Bounce

Transitions

Transition Properties

Transition Duration

Transition Timing Functions

Transition Delay

Basic Transition Examples

Transform Utilities

Scale

Rotate

Translate

Skew

Transform Origin

Custom Animations (v4)

Define in @theme

Usage

Custom Easing

Accessibility: Reduced Motion

motion-safe / motion-reduce

Reduced Motion Pattern

Common Animation Patterns

Hover Card Lift

Button Press Effect

Loading Dots

Fade In on Scroll (with JS)

Skeleton Loader

Hamburger to X Animation

Transition on Enter/Leave (with JS)

Performance Tips

1. Prefer GPU-Accelerated Properties

2. Use Specific Transitions

3. Keep Animations Short

4. Use will-change Sparingly