Spin, beat, fade, breathe, custom CSS animations - make icons come alive
FontAwesome provides ready-to-use animation CSS classes. Just add the animation class after the base icon class:
| Class | Effect | Example | Description |
|---|---|---|---|
fa-spin |
Continuous Rotation | Suitable for loading, refresh scenarios | |
fa-pulse |
8-step Rotation | More resource-efficient than fa-spin, performance-friendly | |
fa-beat |
Scale Beat | Heartbeat effect, suitable for favorite/like buttons | |
fa-fade |
Fade In/Out | Notifications, blinking alerts | |
fa-beat-fade |
Beat + Fade | Combined effect for more prominent alerts | |
fa-bounce |
Bounce | Guide users to scroll down | |
fa-shake |
Shake | Error prompts, warning effects | |
fa-flip |
3D Flip | Card flip, camera switch | |
fa-spin-pulse |
Pulse Rotation | Similar to fa-spin but with stronger rhythm |
Most common scenario - spinning icon during data loading:
<!-- Page loading -->
<div class="text-center py-5">
<i class="fa-solid fa-circle-notch fa-spin fa-3x text-primary"></i>
<p class="mt-2">Loading...</p>
</div>
<!-- Button loading state -->
<button class="btn btn-primary" disabled>
<i class="fa-solid fa-spinner fa-spin"></i> Submitting...
</button><!-- Unread notification dot + beat -->
<span class="position-relative">
<i class="fa-solid fa-bell fa-beat-fade fa-2x"></i>
<span class="badge bg-danger position-absolute top-0 start-100 translate-middle">3</span>
</span>
<!-- Error shake animation -->
<div class="alert alert-danger">
<i class="fa-solid fa-triangle-exclamation fa-shake"></i>
Please enter a valid email address
</div><!-- Favorite button (beats on click) -->
<button class="btn btn-link" onclick="this.querySelector('i').classList.toggle('fa-beat')">
<i class="fa-regular fa-heart fa-2x"></i>
</button>
<!-- Scroll down guide -->
<a href="#content" class="d-block text-center">
<i class="fa-solid fa-chevron-down fa-bounce fa-3x"></i>
<p>Scroll down</p>
</a>Built-in animation speed can be adjusted via CSS variables:
/* Half rotation speed */
.fa-spin {
--fa-animation-duration: 3s;
}
/* Speed up beat */
.fa-beat {
--fa-animation-duration: 0.3s;
}
/* Custom fade opacity */
.fa-fade {
--fa-fade-opacity: 0.3;
}
/* Custom beat scale ratio */
.fa-beat {
--fa-beat-scale: 1.3;
}When built-in animations are not enough, write custom @keyframes:
/* Rainbow rotation animation */
@keyframes rainbow-spin {
0% { transform: rotate(0deg); color: #dc3545; }
25% { transform: rotate(90deg); color: #fd7e14; }
50% { transform: rotate(180deg); color: #198754; }
75% { transform: rotate(270deg); color: #0d6efd; }
100% { transform: rotate(360deg); color: #dc3545; }
}
.rainbow-spin {
animation: rainbow-spin 3s linear infinite;
}
/* Breathe effect */
@keyframes breathe {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.6; }
}
.breathe {
animation: breathe 2s ease-in-out infinite;
}Usage:
<i class="fa-solid fa-star rainbow-spin fa-3x"></i>
<i class="fa-solid fa-circle breathe fa-3x text-success"></i>/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
.fa-spin, .fa-beat, .fa-bounce,
.fa-fade, .fa-shake, .fa-flip {
animation: none !important;
}
}