跳至内容
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 使其以八个步骤旋转。这在 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 中唯一注意到状态更改的方式。请记住，也要更新操作文本并更改元素的其他视觉方面！

在动画的时序和持续时间方面，请避免以每秒三次或更高的速度更改某个元素的状态 - 这可能会引发光敏性癫痫。

所有包含的动画现在都支持并利用 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;
}