CSS Animations
Animation utilities extend Bootstrap by providing reusable, easy-to-apply CSS animations for text, backgrounds, loaders, and more.
All classes use the al-animate prefix and follow utility-first conventions.
Overview
| Utility Class | Description |
|---|---|
| .al-animate-cursor | Typing cursor blink animation |
| .al-animate-scroll-down | Animated scroll-down mouse indicator |
| .al-animate-bg-gradient | Animated gradient background |
| .al-animate-cube | Floating cube animation |
| .al-animate-wave | Multiple fading wave spans |
| .al-animate-water-wave | Animated water ripple with a wave pattern |
| .al-animate-sound-wave | Sound-wave style scaling bars |
| .al-animate-border-gradient | Animated rotating conic gradient border |
| .al-animate-ripple-rounded | Rounded expanding ripple |
| .al-animate-ripple-circle | Circle ripple with continuous effect |
| .al-animate-preloader-circle-* | Preloader spinner variants |
| .al-animate-preloader-grid | Preloader grid fade-in/fade-out |
| .al-transition-duration-* | Sets transition duration from .5s to 1s |
Sass Reference
assets/scss/_animation.scss
Copy
Class Usage Reference
| Class | Description |
|---|---|
| .al-animate-cursor | Typing blink |
| .al-animate-scroll-down | Scroll indicator |
| .al-animate-bg-gradient | Moving background |
| .al-animate-cube | Cube transform scaling |
| .al-animate-wave span.wave-* | Wave fading opacity by sequence |
| .al-animate-water-wave | Water ripple |
| .al-animate-sound-wave | Sound bars scaling |
| .al-animate-border-gradient | Rotating gradient border |
| .al-animate-ripple-circle | Expanding circle |
| .al-animate-preloader-circle-* | Circular spinners |
| .al-animate-preloader-grid | Fading grid effect |
| .al-transition-duration-5 to -10 | Control transition durations |
Examples
Water Wave
Color
Primary
Secondary
Success
Warning
Danger
Info
Black
White
Copy
// colors
Sound Wave
Width
1px
3px
5px
10px
Height
10px
50px
100px
150px
Gap / Space
2px
5px
10px
12px
Color
Primary
Secondary
Success
Warning
Danger
Info
Black
White
Copy
// Width
// Height
// Gap / Space
// Colors
Border Gradient
Border gradient
Stop animation on-hover
animation on-hover
Border Width
Border 1px
Border 5px
Border 10px
Copy
Border gradient
Stop animation on-hover
animation on-hover
Border 1px
Border 5px
Border 10px
Ripple
Colors
Primary
Secondary
Success
Warning
Danger
Info
Black
White
Rounded Ripple
Colors
Primary
Secondary
Success
Warning
Danger
Info
Black
White
Copy
Preloader
Circle
Grid
Grid Colors
Primary
Secondary
Success
Warning
Danger
Info
Black
White
Copy
// Grid Colors
Wave
Forward
Reverse
Width
1px
4px
10px
20px
Height
1px
10px
50px
1px
Gap
1px
5px
10px
20px
Skew
X (-45deg)
X (45deg)
Y (45deg)
Y (-45deg)
Colors
Primary
Secondary
Success
Warning
Danger
Info
Black
White
Copy
// Forward
// Width
//Height
// Gap
// Skew
// Colors
Scrolling Mouse icon
Gradient Background
Copy
Cube
Copy
Developer Notes
-
Transition utilities range from al-transition-duration-5 (0.5s) to al-transition-duration-10 (1s)
-
Ripples support color overrides using .al-ripple-primary, .al-ripple-success, etc.
-
Animations are designed to work seamlessly with Bootstrap's utility classes.
-
Preloader classes offer circle, grid, and multi-color spinner variants.
-
Animations use CSS @keyframes and maintain accessibility considerations for blinking or continuous movement.