tailwindcss-animations by josiahsiegel/claude-plugin-marketplace
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill tailwindcss-animations用于加载指示器的持续旋转效果:
<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>
用于通知的雷达式脉冲效果:
<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>
用于骨架屏加载器的淡入淡出效果:
<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 开发者,精准高效
引人注目的垂直弹跳效果:
<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>
@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>
<!-- 仅在用户偏好动画时显示动画 -->
<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>
<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>
<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>
对于复杂的进入/离开过渡,使用像 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>
)
}
<!-- 良好 - GPU 加速 -->
<div class="transform hover:translate-x-2 transition-transform">
<!-- 避免 - 可能导致重绘 -->
<div class="hover:left-2 transition-all">
<!-- 良好 - 仅过渡变化的属性 -->
<div class="transition-colors duration-200 hover:bg-blue-500">
<!-- 避免 - 过渡所有属性 -->
<div class="transition-all duration-200 hover:bg-blue-500">
<!-- 良好 - 响应迅速的反馈 -->
<button class="transition-colors duration-150">
<!-- 避免 - UI 反馈太慢 -->
<button class="transition-colors duration-1000">
<!-- 仅用于复杂、频繁动画的元素 -->
<div class="will-change-transform animate-spin">
加载旋转器
</div>
每周安装量
1.1K
代码仓库
GitHub 星标
21
首次出现
2026年1月20日
安全审计
安装于
opencode981
gemini-cli955
codex932
github-copilot899
cursor853
kimi-cli760
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>
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>
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>
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>
| 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 |
| Class | Duration |
|---|---|
duration-75 | 75ms |
duration-100 | 100ms |
duration-150 | 150ms |
duration-200 | 200ms |
duration-300 | 300ms |
duration-500 | 500ms |
| Class | Easing |
|---|---|
ease-linear | Linear |
ease-in | Accelerate |
ease-out | Decelerate |
ease-in-out | Accelerate then decelerate |
| Class | Delay |
|---|---|
delay-75 | 75ms |
delay-100 | 100ms |
delay-150 | 150ms |
delay-200 | 200ms |
delay-300 | 300ms |
delay-500 | 500ms |
<!-- 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>
<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>
<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>
<div class="transform hover:translate-x-2 transition-transform">
Move right
</div>
<div class="transform hover:-translate-y-2 transition-transform">
Move up
</div>
<div class="transform hover:skew-x-3 transition-transform">
Skew horizontal
</div>
<div class="transform hover:skew-y-3 transition-transform">
Skew vertical
</div>
<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>
@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); }
}
<div class="animate-fade-in">Fades in</div>
<div class="animate-slide-up">Slides up</div>
<div class="animate-shake">Shakes on error</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">
Bouncy scale
</div>
<!-- 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>
/* Apply globally */
@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
">
Card content
</div>
<button class="
transform transition-transform duration-100
active:scale-95
bg-blue-500 text-white px-4 py-2 rounded
">
Click me
</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>
<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))
<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>
<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>
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>
)
}
<!-- GOOD - GPU accelerated -->
<div class="transform hover:translate-x-2 transition-transform">
<!-- AVOID - May cause repaints -->
<div class="hover:left-2 transition-all">
<!-- 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">
<!-- GOOD - Snappy feedback -->
<button class="transition-colors duration-150">
<!-- AVOID - Too slow for UI feedback -->
<button class="transition-colors duration-1000">
<!-- Only for complex, frequently animated elements -->
<div class="will-change-transform animate-spin">
Loading spinner
</div>
Weekly Installs
1.1K
Repository
GitHub Stars
21
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode981
gemini-cli955
codex932
github-copilot899
cursor853
kimi-cli760
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
transition-transform | Transform only |
duration-700| 700ms |
duration-1000 | 1000ms |