旋转、跳动、闪烁、呼吸、自定义 CSS 动画——让图标"活"起来
FontAwesome 提供了开箱即用的动画 CSS 类。在图标的基础类名后加上动画类即可：
| 类名 | 效果 | 示例 | 说明 |
|---|---|---|---|
fa-spin |
匀速旋转 | 适用于加载中、刷新等场景 | |
fa-pulse |
8 步旋转 | 比 fa-spin 更省资源，Perf 友好 | |
fa-beat |
缩放跳动 | 心跳效果，适合收藏、喜欢按钮 | |
fa-fade |
淡入淡出 | 通知提醒、闪烁提示 | |
fa-beat-fade |
跳动 + 淡出 | 组合效果，更醒目的提醒 | |
fa-bounce |
弹跳 | 引导用户向下滚动 | |
fa-shake |
左右抖动 | 错误提示、警告效果 | |
fa-flip |
3D 翻转 | 翻转卡片、相机切换 | |
fa-spin-pulse |
脉冲旋转 | 类似 fa-spin 但节奏感更强 |
最常用的场景——数据加载时的旋转图标：
<!-- 页面加载中 -->
<div class="text-center py-5">
<i class="fa-solid fa-circle-notch fa-spin fa-3x text-primary"></i>
<p class="mt-2">加载中...</p>
</div>
<!-- 按钮加载状态 -->
<button class="btn btn-primary" disabled>
<i class="fa-solid fa-spinner fa-spin"></i> 提交中...
</button><!-- 未读通知小红点 + 跳动 -->
<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>
<!-- 错误提示抖动 -->
<div class="alert alert-danger">
<i class="fa-solid fa-triangle-exclamation fa-shake"></i>
请输入有效的邮箱地址
</div><!-- 收藏按钮（点击后跳动） -->
<button class="btn btn-link" onclick="this.querySelector('i').classList.toggle('fa-beat')">
<i class="fa-regular fa-heart fa-2x"></i>
</button>
<!-- 向下滚动引导 -->
<a href="#content" class="d-block text-center">
<i class="fa-solid fa-chevron-down fa-bounce fa-3x"></i>
<p>向下滚动</p>
</a>内置动画的速度可以通过 CSS 变量调整：
/* 减半旋转速度 */
.fa-spin {
--fa-animation-duration: 3s;
}
/* 加速跳动 */
.fa-beat {
--fa-animation-duration: 0.3s;
}
/* 自定义淡出透明度 */
.fa-fade {
--fa-fade-opacity: 0.3;
}
/* 自定义跳动缩放比例 */
.fa-beat {
--fa-beat-scale: 1.3;
}当内置动画不够用时，可以编写自定义 @keyframes：
/* 彩色旋转动画 */
@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;
}
/* 呼吸灯效果 */
@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;
}使用方式：
<i class="fa-solid fa-star rainbow-spin fa-3x"></i>
<i class="fa-solid fa-circle breathe fa-3x text-success"></i>/* 尊重用户动画偏好 */
@media (prefers-reduced-motion: reduce) {
.fa-spin, .fa-beat, .fa-bounce,
.fa-fade, .fa-shake, .fa-flip {
animation: none !important;
}
}