过渡 & 动画
使用 CSS 动画对元素进行动画处理的工具。
¥Basic usage
¥Spin
添加 animate-spin
工具以向加载指示器等元素添加线性旋转动画。
¥Add the animate-spin
utility to add a linear spin animation to elements like loading indicators.
<button type="button" class="bg-indigo-500 ..." disabled>
<svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
<!-- ... -->
</svg>
Processing...
</button>
¥Ping
添加 animate-ping
工具,使元素像雷达脉冲或水波纹一样缩放和淡入淡出 - 对于通知徽章等内容非常有用。
¥Add the animate-ping
utility to make an element scale and fade like a radar ping or ripple of water — useful for things like notification badges.
<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
添加 animate-pulse
工具以使元素轻轻淡入和淡出 - 对于骨架加载器等内容很有用。
¥Add the animate-pulse
utility to make an element gently fade in and out — useful for things like skeleton loaders.
<div class="border border-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto"> <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-6 py-1"> <div class="h-2 bg-slate-200 rounded"></div> <div class="space-y-3"> <div class="grid grid-cols-3 gap-4"> <div class="h-2 bg-slate-200 rounded col-span-2"></div> <div class="h-2 bg-slate-200 rounded col-span-1"></div> </div> <div class="h-2 bg-slate-200 rounded"></div> </div> </div> </div> </div>
<div class="border border-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto"> <div class="animate-pulse flex space-x-4"> <div class="rounded-full bg-slate-700 h-10 w-10"></div> <div class="flex-1 space-y-6 py-1"> <div class="h-2 bg-slate-700 rounded"></div> <div class="space-y-3"> <div class="grid grid-cols-3 gap-4"> <div class="h-2 bg-slate-700 rounded col-span-2"></div> <div class="h-2 bg-slate-700 rounded col-span-1"></div> </div> <div class="h-2 bg-slate-700 rounded"></div> </div> </div> </div> </div>
¥Bounce
添加 animate-bounce
工具以使元素上下反弹 - 对于 “向下滚动” 指标等有用。
¥Add the animate-bounce
utility to make an element bounce up and down — useful for things like “scroll down” indicators.
<svg class="animate-bounce w-6 h-6 ...">
<!-- ... -->
</svg>
对于用户指定他们更偏好缩减动作的情况,你可以使用 motion-safe
和 motion-reduce
变体有条件地应用动画和转场:
¥For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the motion-safe
and motion-reduce
variants:
<button type="button" class="bg-indigo-600 ..." disabled>
<svg class="motion-safe:animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
<!-- ... -->
</svg>
Processing
</button>
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:animate-spin
to only apply the animate-spin
utility on hover.
<div class="hover:animate-spin">
<!-- ... -->
</div>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:animate-spin
to apply the animate-spin
utility at only medium screen sizes and above.
<div class="md:animate-spin">
<!-- ... -->
</div>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
¥Using custom values
¥Customizing your theme
就其本质而言,动画往往是高度特定于项目的。我们默认包含的动画最好被视为有用的示例,我们鼓励你自定义动画以更好地满足你的需求。
¥Animations by their very nature tend to be highly project-specific. The animations we include by default are best thought of as helpful examples, and you’re encouraged to customize your animations to better suit your needs.
默认情况下,Tailwind 为四种不同的示例动画以及 animate-none
工具提供工具。你可以通过编辑 tailwind.config.js
文件中的 theme.animation
或 theme.extend.animation
来自定义这些值。
¥By default, Tailwind provides utilities for four different example animations, as well as the animate-none
utility. You can customize these values by editing theme.animation
or theme.extend.animation
in your tailwind.config.js
file.
module.exports = {
theme: {
extend: {
animation: {
'spin-slow': 'spin 3s linear infinite',
}
}
}
}
要添加新动画 @keyframes
,请使用主题配置的 keyframes
部分:
¥To add new animation @keyframes
, use the keyframes
section of your theme configuration:
module.exports = {
theme: {
extend: {
keyframes: {
wiggle: {
'0%, 100%': { transform: 'rotate(-3deg)' },
'50%': { transform: 'rotate(3deg)' },
}
}
}
}
}
然后,你可以在主题配置的 animation
部分按名称引用这些关键帧:
¥You can then reference these keyframes by name in the animation
section of your theme configuration:
module.exports = {
theme: {
extend: {
animation: {
wiggle: 'wiggle 1s ease-in-out infinite',
}
}
}
}
在 主题定制 文档中了解有关自定义默认主题的更多信息。
¥Learn more about customizing the default theme in the theme customization documentation.
¥Arbitrary values
If you need to use a one-off animation
value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<div class="animate-[wiggle_1s_ease-in-out_infinite]">
<!-- ... -->
</div>
Learn more about arbitrary value support in the arbitrary values documentation.