Utility-классы переходов
Включайте переходы CSS с помощью transition-*, выбирайте анимируемые свойства через transition-colors, transition-transform и transition-all.
«Utility-классы переходов» — бесплатный урок Tailwind CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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.
Часто задаваемые вопросы
Урок «Utility-классы переходов» бесплатный?
Да — полный текст урока «Utility-классы переходов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Tailwind CSS Academy, подпишись на CoddyKit PRO. Курс Tailwind CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Utility-классы переходов»?
Включайте переходы CSS с помощью transition-*, выбирайте анимируемые свойства через transition-colors, transition-transform и transition-all. Ты практикуешь Tailwind CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Tailwind CSS Academy?
Предыдущий опыт не требуется. Tailwind CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Utility-классы переходов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Tailwind CSS Academy?
Да. Каждый урок Tailwind CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Utility-классы переходов
- Длительность и функция плавности
- Встроенные покадровые анимации
- Собственные анимации в конфигурации