Hover Transitions
Hover over the elements to see smooth transitions.
opacity
scale
translate
rotate
color
shadow
Timing Functions
Different easing functions for transitions.
linear
ease
ease-in
ease-out
ease-in-out
bounce
Usage
// SCSS Mixin
.element {
@include transition(opacity, 0.3s, ease-out);
}
// Multiple properties
.card {
@include transition-multiple(
(transform, 0.3s, ease-out),
(opacity, 0.2s, ease-in),
(box-shadow, 0.3s, ease)
);
}
// Utility classes
<div class="transition-all">...</div>
<div class="transition-opacity">...</div>
<div class="transition-transform">...</div>