Transitions ​
Utilities for applying transitions to various properties.
| Class Name | Transition Property |
|---|---|
| .transition-all | transition-property: all; |
| .transition-colors | transition-property: color, background-color, border-color, outline-color, fill, stroke; |
| .transition-opacity | transition-property: opacity; |
| .transition-transform | transition-property: transform; |
| .transition-elevation | transition-property: box-shadow; |
| .transition-corner | transition-property: border-radius; |
| .transition-dimension | transition-property: width, height, inline-size, block-size; |
| .transition-spacing | transition-property: margin, padding, gap; |
| .transition-input | transition-property: color, background-color, border-color, outline-color, fill, stroke, opacity, box-shadow, border-radius; |
Applying Transitions ​
Use the transition-{properties} utilities to specify which properties should transition when they change.
html
<div class="[...] transition-all transform hover:rotate-12 hover:scale-110 hover:elevation-1 hover:primary">...</div>Applying transitions to all child elements ​
Use the child-transition-{properties} utilities to specify which properties should transition when they change.
html
<div class="[...] child-transition-all">
<div class="[...] transform hover:rotate-12 hover:scale-110 hover:elevation-1 hover:primary">...</div>
<div class="[...] transform hover:rotate-12 hover:scale-110 hover:elevation-1 hover:primary">...</div>
</div>