Animations

Overview

The animation utilities provide a set of transitions and animations to add motion to your UI elements.

Base variable: $transition-speed: 0.3s

Add smooth transitions to elements when their properties change.

.transition (0.3s)

.transition-fast (0.5s)

.transition-slow (1s)

Add predefined animations to elements.

.animate-fade-in

Hover to fade in

.animate-slide-up

Hover to slide up

.animate-slide-down

Hover to slide down

More complex animations for creating engaging UI effects.

.animate-bounce

Bounces

.animate-pulse

Pulses

.animate-flip

Flips

.animate-slide-fade-left

Slides from left

.animate-slide-fade-right

Slides from right

Control animation duration, delay, and fill mode.

Duration: .duration-300, .duration-500, .duration-1000

0.3s

0.5s

Delay: .delay-100, .delay-500

0.1s delay

0.5s delay

Fill mode: .fill-forwards

Stays visible after animation

Animations that trigger on hover.

.hover-zoom

Hover to zoom

.hover-shadow

Hover for shadow

.hover-animate-bounce

Hover to bounce