过渡实用程序
使用 transition-* 启用 CSS 过渡，并使用 transition-colors、transition-transform 和 transition-all 选择要设置动画的属性。
过渡实用程序 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Tailwind CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Tailwind CSS Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Why CSS Transitions Matter
CSS transitions make state changes smooth and feel intentional rather than abrupt. When a button changes background color on hover, a sidebar slides in, or an input gets a focus ring, transitions communicate to users that something happened and guide their attention. Tailwind's transition utilities let you add these animations with a single class — no custom CSS required for the most common use cases.
The transition Utility
The base transition utility enables CSS transitions for the most commonly animated properties: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, and filter. Adding just transition to a button is usually enough to make hover color changes animate smoothly.
<!-- Simple hover transition on a button -->
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
Hover Me
</button>
<!-- The transition class enables smooth color changes -->
<!-- Without it, the color snaps instantly on hover -->
<!-- With it, the background color animates over 150ms (Tailwind default) -->Specific Transition Properties
Use targeted transition utilities to animate only specific properties. This is more performant than transition-all because the browser does not need to recalculate all possible animated properties on every frame. Tailwind provides transition-colors, transition-opacity, transition-shadow, transition-transform, and transition-all for different needs.
<!-- Only animate colors -->
<button class="bg-blue-600 hover:bg-blue-700 text-white transition-colors">
Color Transition
</button>
<!-- Only animate transform (GPU accelerated) -->
<div class="hover:scale-105 transition-transform cursor-pointer">
Scale on hover
</div>
<!-- Only animate opacity -->
<div class="opacity-100 hover:opacity-75 transition-opacity">
Fade on hover
</div>
<!-- Animate shadow (depth change) -->
<div class="shadow hover:shadow-lg transition-shadow rounded-xl p-4">
Shadow depth change
</div>transition-all vs Specific Properties
transition-all transitions every animatable CSS property simultaneously. While convenient, it can cause unexpected behavior — for example, layout properties like height or width becoming animated when you only wanted color changes. It is also less performant because the browser tracks all properties. Use specific transition utilities whenever possible; reach for transition-all only when you genuinely need multiple unrelated properties to animate together.
<!-- transition-all: animates EVERYTHING that changes -->
<div class="bg-gray-100 hover:bg-blue-50 hover:scale-102 transition-all">
All properties animate (colors, transforms, borders...)
</div>
<!-- More precise: only animate what you intend -->
<div class="bg-gray-100 hover:bg-blue-50 hover:scale-102 transition-colors transition-transform">
Only colors and transforms animate
</div>Combining Transition with State Variants
Transition utilities work by enabling the CSS transition property. State variants like hover:, focus:, and group-hover: provide the before and after states that the transition animates between. Always place the transition class on the base element (not inside the variant) so it applies in both directions — the transition runs on enter AND exit of the state.
<!-- Transition enables smooth enter AND exit -->
<a class="text-gray-600 hover:text-blue-600 transition-colors duration-200"
href="#">
Animated link — hover to see color change both ways
</a>
<!-- Card with multiple transitions -->
<div class="bg-white hover:bg-blue-50
shadow-sm hover:shadow-md
border border-gray-200 hover:border-blue-200
transition-all duration-200 rounded-xl p-6 cursor-pointer">
Interactive card
</div>Animating Opacity and Visibility
Fading elements in and out requires transitioning opacity combined with managing visibility or display. CSS transitions cannot animate to or from display: none, so use opacity plus pointer-events-none for simple fade effects. For elements that must truly disappear (removing them from the tab order), combine opacity transitions with JavaScript class toggling.
<!-- Fade an element using opacity + pointer-events -->
<div id="tooltip"
class="opacity-0 pointer-events-none
group-hover:opacity-100 group-hover:pointer-events-auto
transition-opacity duration-200
bg-gray-900 text-white text-xs px-2 py-1 rounded">
Tooltip content
</div>
<!-- JavaScript fade with class toggle -->
<!-- Remove: classList.add('opacity-0', 'pointer-events-none') -->
<!-- Show: classList.remove('opacity-0', 'pointer-events-none') -->Transform Transitions
Transform transitions are particularly smooth because they run on the GPU rather than triggering layout recalculations. Tailwind's scale-*, rotate-*, translate-*, and skew-* utilities all animate cleanly with transition-transform. Scale effects on cards and buttons, rotation effects on icons, and slide-in effects on panels all use this approach for best performance.
<!-- Subtle scale effect on card hover -->
<div class="hover:scale-105 transition-transform duration-200 cursor-pointer bg-white rounded-xl p-6 shadow">
Card that scales up on hover
</div>
<!-- Rotating icon -->
<button class="group p-2">
<svg class="w-5 h-5 group-hover:rotate-180 transition-transform duration-300">
<!-- chevron icon -->
</svg>
</button>
<!-- Slide from left with translateX -->
<div class="-translate-x-full open:translate-x-0 transition-transform duration-300">
Sidebar panel
</div>Reduced Motion Accessibility
Some users experience motion sickness or seizures from animations and set their OS to Reduce Motion. Tailwind provides the motion-reduce: and motion-safe: variants that activate based on the user's prefers-reduced-motion media query. Use motion-safe: to apply animations only when the user has not requested reduced motion, making your transitions accessible by default.
<!-- Only animate when user is OK with motion -->
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg
motion-safe:transition-colors motion-safe:duration-200">
Accessible Button
</button>
<!-- Remove transitions entirely for reduced-motion users -->
<div class="hover:scale-105 motion-reduce:transform-none
motion-safe:transition-transform motion-safe:duration-200">
Accessible card hover
</div>Transition on Focus States
Focus transitions are particularly important for keyboard navigation. When a user tabs to an input or button, the focus ring should appear smoothly rather than snapping. Apply transition to all interactive elements so the focus ring transition feels as polished as the hover transition. Include focus:ring-* and focus:ring-offset-* with a transition for the best keyboard experience.
<input
type="text"
class="
w-full px-4 py-2 rounded-lg
border border-gray-300
text-gray-900 placeholder:text-gray-400
ring-0
focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none
transition duration-150
"
placeholder="Smooth focus ring transition"
/>Multiple Transition Properties
You can combine multiple specific transition utilities on a single element to animate only a precise set of properties. Tailwind composes these using the CSS transition-property shorthand. Stacking transition-colors and transition-shadow on the same element makes both colors and shadows animate while leaving other properties (like transforms) instant.
<!-- Animate colors AND shadows, but not transforms -->
<div class="
bg-white hover:bg-gray-50
shadow hover:shadow-md
scale-100 hover:scale-105
transition-colors transition-shadow
duration-200 rounded-xl p-6
">
Colors and shadows animate smoothly;
scale change happens instantly (no transition-transform)
</div>Transition in Practice: Complete Example
Here is a real-world navigation link with all transitions polished: the background fades in on hover, the text color changes simultaneously, the underline grows from left to right using a scale transform, and focus states match the hover style exactly. Every interaction feels intentional and smooth without a single line of custom CSS.
<a
href="/features"
class="
relative inline-block
text-gray-600 hover:text-blue-600
font-medium text-sm
pb-0.5
transition-colors duration-150
focus:outline-none focus:text-blue-600
group
"
>
Features
<!-- Animated underline -->
<span class="
absolute bottom-0 left-0 w-full h-0.5 bg-blue-600
scale-x-0 group-hover:scale-x-100
transition-transform duration-200 origin-left
"></span>
</a>Quick Check
Test your understanding of Tailwind's transition utilities.
Lesson Recap
In this lesson you learned: the base transition utility enables smooth animation for common properties, specific transition utilities like transition-colors and transition-transform are more performant than transition-all, and the motion-safe: variant ensures animations only apply when the user has not requested reduced motion. Next up we control transition duration and timing functions.
常见问题解答
「过渡实用程序」课时是免费的吗？
是的 — 「过渡实用程序」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「过渡实用程序」这节课中我会学到什么？
使用 transition-* 启用 CSS 过渡，并使用 transition-colors、transition-transform 和 transition-all 选择要设置动画的属性。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「过渡实用程序」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。