To transition properties not covered by the default
transition
utility (like
height
,
max-height
, or custom properties),
you can use
transition-all
or list them explicitly like
transition-[height,opacity]
.
This section smoothly transitions its
max-height
and
opacity
.
This is achieved using
transition-[max-height,opacity]
.
If we used only
transition
, these specific properties might not animate.
transition-all
would also work but is less specific.
Keep in mind that not all CSS properties are transitionable. For example, the
display
property
(e.g., changing from
hidden
to
block
or
flex
)
typically does not transition. Changes to
display
are instant.
For show/hide effects, transitioning
opacity
,
height
/
max-height
,
or
transform: scale()
are common alternatives.
The orange box above uses
display: none/block
. Its appearance/disappearance is instant.