Skill ID: Interactive_40
Description: Style changes animate smoothly instead of instantly.
Where to apply: Hover effects, opening/closing menus, showing/hiding elements.
Key Tailwind Classes:
transition
duration-300
ease-in-out
transition duration-300 ease-in-out
Gotcha:
Forgetting to specify *which* properties should transition. By default, Tailwind transitions common properties like colors, opacity, shadow, and transform. If you want to transition
width
or
height
, you might need
transition-all
or explicitly list them:
transition-[width,height]
. Transitions also don't work on all properties (e.g.,
display
).
Hover over the box below to see a smooth transition effect.
Relevant classes on the box:
transition
,
duration-500
,
ease-in-out
,
hover:bg-pink-500
,
hover:scale-110
,
hover:rotate-12
.
The
transition
,
duration-*
, and
ease-*
classes enable smooth changes for properties like background color (
bg-*
) and transformations (
scale-*
,
rotate-*
) on hover.