跳到内容
Font Awesome 文档
欢迎 Web Awesome，最大的开源 Web 组件库。
今天预订！

图标动画

我们的样式工具包可以解决图标大小、旋转和堆叠的麻烦，让您能够使用动画使网站更具吸引力。

我们将介绍动画的基本知识，如节拍、淡入淡出、节拍-淡入淡出、翻转和旋转，让您可以为图标创建更多视觉效果。

节拍

使用 fa-beat 动画来缩放图标。这对于吸引注意力或用于与健康/心脏相关的图标非常有用。

<div class="fa-3x">
  <i class="fa-solid fa-circle-plus fa-beat"></i>
  <i class="fa-solid fa-heart fa-beat"></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s;"></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 2s;"></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-beat-scale: 2.0;"></i>
</div>

节拍实用程序

实用程序细节
--fa-beat-scale设置图标将缩放到的最大值

淡入淡出

使用 fa-fade 动画以视觉方式淡入淡出图标，以一种微妙（或不那么微妙）的方式吸引注意力。

<div class="fa-3x">
  <i class="fa-solid fa-triangle-exclamation fa-fade"></i>
  <i class="fa-solid fa-skull-crossbones fa-fade"></i>
  <i class="fa-solid fa-desktop-arrow-down fa-fade"></i>
  <i class="fa-solid fa-i-cursor fa-fade" style="--fa-animation-duration: 2s; --fa-fade-opacity: 0.6;"></i>
</div>

淡入淡出实用程序

实用程序细节
--fa-fade-opacity设置图标将淡入淡出的最低不透明度值

节拍-淡入淡出

使用 fa-beat-fade 动画通过以视觉方式缩放和脉冲图标来吸引注意力。

<div class="fa-3x">
  <i class="fa-solid fa-triangle-person-digging fa-beat-fade"></i>
  <i class="fa-solid fa-square-exclamation fa-beat-fade"></i>
  <i class="fa-solid fa-poo-bolt fa-beat-fade" style="--fa-beat-fade-opacity: 0.1; --fa-beat-fade-scale: 1.25;"></i>
  <i class="fa-solid fa-circle-info fa-beat-fade" style="--fa-beat-fade-opacity: 0.67; --fa-beat-fade-scale: 1.075;"></i>
</div>

节拍-淡入淡出实用程序

实用程序细节
--fa-beat-fade-opacity设置图标将淡入淡出的最低不透明度值
--fa-beat-fade-scale设置图标将缩放到的最大值

弹跳

使用 fa-bounce 动画通过以视觉方式上下弹跳图标来吸引注意力。

<div class="fa-3x">
  <i class="fa-solid fa-basketball fa-bounce"></i>
  <i class="fa-solid fa-volleyball fa-bounce"></i>


  <!-- bounce animation with no "squish" -->
  <i class="fa-solid fa-frog fa-bounce" style="--fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1;"></i>


  <!-- bounce animation with no "squish" or "rebound" -->
  <i class="fa-solid fa-envelope fa-bounce" style="--fa-bounce-start-scale-x: 1;--fa-bounce-start-scale-y: 1;--fa-bounce-jump-scale-x: 1;--fa-bounce-jump-scale-y: 1;--fa-bounce-land-scale-x: 1;--fa-bounce-land-scale-y: 1;--fa-bounce-rebound: 0;"></i>
</div>

弹跳实用程序

实用程序细节
--fa-bounce-rebound设置图标在跳跃后着陆时的反弹量
--fa-bounce-height设置图标弹跳时跳跃到的最大高度
--fa-bounce-start-scale-x设置图标在开始弹跳时的水平变形（“压缩”）
--fa-bounce-start-scale-y设置图标在开始弹跳时的垂直变形（“压缩”）
--fa-bounce-jump-scale-x设置图标在跳跃顶部的水平变形（“压缩”）
--fa-bounce-jump-scale-y设置图标在跳跃顶部的垂直变形（“压缩”）
--fa-bounce-land-scale-x设置图标在跳跃后着陆时的水平变形（“压缩”）
--fa-bounce-land-scale-y设置图标在跳跃后着陆时的垂直变形（“压缩”）

翻转

使用 fa-flip 动画在 3D 空间中旋转图标。默认情况下，翻转将图标绕 Y 轴旋转 180 度。翻转对于转换、处理状态或使用在现实世界中翻转的物理对象很有用。

<div class="fa-3x">
  <i class="fa-solid fa-compact-disc fa-flip"></i>
  <i class="fa-solid fa-camera-rotate fa-flip"></i>
  <i class="fa-solid fa-cassette-tape fa-flip"></i>
  <i class="fa-solid fa-scroll fa-flip" style="--fa-flip-x: 1; --fa-flip-y: 0;"></i>
  <i  class="fa-solid fa-money-check-dollar fa-flip"  style="--fa-animation-duration: 3s;"></i>
</div>

翻转实用程序

实用程序细节
--fa-flip-x设置表示旋转轴的向量的 x 坐标（介于 0 和 1 之间）
--fa-flip-y设置表示旋转轴的向量的 y 坐标（介于 0 和 1 之间）
--fa-flip-z设置表示旋转轴的向量的 z 坐标（介于 0 和 1 之间）
--fa-flip-angle设置翻转的旋转角度。正角度表示顺时针旋转，负角度表示逆时针旋转。

摇动

使用 fa-shake 动画来吸引注意力或通过左右摇晃图标来表示某些操作不允许。

<div class="fa-3x">
  <i class="fa-solid fa-bell fa-shake"></i>
  <i class="fa-solid fa-lock fa-shake"></i>
  <i class="fa-solid fa-stopwatch fa-shake"></i>
  <i class="fa-solid fa-bomb fa-shake"></i>
</div>

旋转

使用 fa-spin 类使任何图标旋转，并使用 fa-spin-pulse 使其以 8 个步骤旋转。这对 fa-spinner 和加载动画类别 中的所有内容特别有效。如果您希望图标反向旋转（例如，逆时针），请添加另一个 fa-spin-reverse 类。

<div class="fa-3x">
  <i class="fa-solid fa-sync fa-spin"></i>
  <i class="fa-solid fa-circle-notch fa-spin"></i>
  <i class="fa-solid fa-cog fa-spin"></i>
  <i class="fa-solid fa-cog fa-spin fa-spin-reverse"></i>
  <i class="fa-solid fa-spinner fa-spin-pulse"></i>
  <i class="fa-solid fa-spinner fa-spin-pulse fa-spin-reverse"></i>
</div>

旋转实用程序

实用程序细节
fa-spin使图标顺时针旋转 360°
fa-spin-pulse使图标以 8 个增量步骤顺时针旋转 360°
fa-spin-reverse与 fa-spin 或 fa-spin-pulse 结合使用时，使图标逆时针旋转。

无障碍性

以最无障碍的方式在网络上使用动画需要一些额外的考虑

通常，最好以辅助的方式在网络上使用动画，而不是作为 UI 中唯一注意到状态变化的方式。请记住更新操作的文本并更改元素的其他视觉方面！

当涉及到动画的计时和持续时间时，请避免以每秒 3 次或更高的速度更改事物的状态 - 这可能会引发光敏性癫痫。

所有包含的动画现在都支持并利用 prefers-reduced-motion CSS 媒体功能 来检测用户是否已要求系统最大程度地减少其使用的非必要运动量。

情况对包含的动画的影响
未设置首选项（默认）动画将按预期呈现
首选项设置为 reduce动画将被禁用

当 prefers-reduced-motion 设置为 reduce 时，它表示用户更喜欢更少的运动，这可能会引发患有前庭运动障碍的人在页面上的不适。

定制

我们添加了CSS 自定义属性 以使自定义更容易、更高效，您可以在所有动画中使用这些自定义属性。为以下属性定义您自己的值以覆盖和自定义 Font Awesome 的默认值。

CSS 自定义属性细节可接受的值
--fa-animation-delay设置动画的初始延迟任何有效的 CSS animation-delay 值
--fa-animation-direction设置动画的方向任何有效的 CSS animation-direction 值
--fa-animation-duration设置动画的持续时间任何有效的 CSS animation-duration 值
--fa-animation-iteration-count设置动画的迭代次数任何有效的 CSS animation-iteration-count 值
--fa-animation-timing设置动画如何通过帧进行任何有效的 CSS animation-timing-function 值

<div class="fa-3x">
  <i class="fa-solid fa-cog fa-spin"></i>
  <i class="fa-solid fa-cog fa-spin" style="--fa-animation-direction: reverse;"></i>
  <i class="fa-solid fa-cog fa-spin" style="--fa-animation-duration: 15s;"></i>
  <i class="fa-solid fa-compact-disc fa-spin" style="--fa-animation-duration: 30s; --fa-animation-iteration-count: 1;"></i>
  <i class="fa-solid fa-tire fa-spin" style="--fa-animation-duration: 3s; --fa-animation-iteration-count: 5;--fa-animation-timing: ease-in-out;"></i>
</div>

图标动画 + 晃动

我们努力让图标在旋转或脉冲时保持完美居中。但是，我们发现 **Font Awesome 的 Web 字体 + CSS 方法存在一些浏览器问题**。这似乎是 Web 字体的普遍问题，我们无法直接解决。我们确实有几种方法可以帮助您解决此问题

  • **设置动画图标的显示** - 在您可以使用的地方使用 display: block;。这似乎对解决此问题有很大帮助。
  • **使用 16px 的倍数（基本字号）** - 我们注意到否则晃动会更加明显。
  • **切换框架** - 切换到带有 JavaScript 的 SVG 方法；这对这种情况更有用。

与 animiate.css 冲突

animate.css 的早期版本也使用 fast CSS 类选择器来控制动画的速度。

由于 Font Awesome 也使用此类选择器，因此它们会发生冲突。

您可以通过将 animate.css 升级到新版本来解决此问题，或者您可以在 CSS 中添加此异常以解决问题。

.animated.fast {
  font-family: inherit;
}