Font Awesome 7 Animation Classes: A Complete Guide to Spin, Beat, Bounce, Fade, Shake, and Pulse

Font Awesome 7 provides six built-in animation classes—fa-spin, fa-pulse, fa-beat, fa-bounce, fa-fade, and fa-shake—defined in scss/_animated.scss that use CSS custom properties for configurable timing and automatically respect reduced-motion preferences.

Font Awesome 7 (the 7.x branch) ships with a comprehensive SCSS-based architecture that generates utility classes for icon animations. These Font Awesome 7 animation classes allow developers to add motion to any icon using a single HTML class, with full control over duration, timing, and direction via CSS variables.

Core Animation Classes Overview

The following classes are generated from the source code in scss/_animated.scss and imported through the main scss/fontawesome.scss entry point:

• fa-spin – Continuous 360-degree rotation with a default duration of 2 seconds
• fa-pulse – 8-step incremental rotation using steps(8) timing for a mechanical effect
• fa-beat – Pulsing scale animation that grows and shrinks the icon
• fa-bounce – Vertical bouncing movement with custom cubic-bezier easing
• fa-fade – Cyclical opacity transition from visible to transparent
• fa-shake – Rapid side-to-side horizontal movement
• fa-spin-reverse – Counter-clockwise variant of the standard spin animation

How Font Awesome 7 Animations Work Internally

The Variable Layer in _variables.scss

The animation system relies on global SCSS variables defined in scss/_variables.scss. This file establishes the CSS prefix and default animation parameters that propagate throughout the framework.

$css-prefix: fa !default;   // Produces classes like .fa-spin

The variable layer also defines the naming convention for CSS custom properties used by all animations, ensuring consistent configuration across the codebase.

The Animation Module in _animated.scss

The scss/_animated.scss file contains the actual class definitions. Each animation class follows an identical pattern, mapping SCSS variables to CSS custom properties with sensible fallbacks:

.#{v.$css-prefix}-spin {
  animation-name: #{v.$css-prefix}-spin;
  animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
  animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
  animation-duration: var(--#{v.$css-prefix}-animation-duration, 2s);
  animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
  animation-timing-function: var(--#{v.$css-prefix}-animation-timing, linear);
}

According to lines 59-66 of _animated.scss, this pattern repeats for fa-beat, fa-bounce, fa-fade, fa-shake, and fa-pulse, with only the animation-name and default timing values differing. For example, fa-bounce uses cubic-bezier easing while fa-pulse utilizes steps(8) for its stepped animation effect.

Keyframe Definitions

The same _animated.scss file declares the @keyframes blocks that drive the visual transformations. As shown in lines 147-150, the spin animation uses pure CSS transforms:

@keyframes #{v.$css-prefix}-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Similar keyframes exist for fa-beat (scale transforms), fa-bounce (translateY movements), fa-fade (opacity changes), and fa-shake (translateX shifts).

Accessibility and Reduced Motion Support

Lines 81-96 of _animated.scss implement a critical accessibility feature. A media query automatically disables all animations when the user's operating system prefers reduced motion:

@media (prefers-reduced-motion: reduce) {
  animation: none !important;
}

This ensures compliance with WCAG guidelines without requiring manual intervention from developers.

Implementing Font Awesome 7 Animation Classes in Your Project

Basic HTML Implementation

Include the Font Awesome 7 CSS via CDN or npm, then apply animation classes directly to icon elements:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.2.0/css/all.min.css">

<!-- Continuous rotation -->
<i class="fa-solid fa-spinner fa-spin"></i>

<!-- Mechanical stepping -->
<i class="fa-solid fa-spinner fa-pulse"></i>

<!-- Heartbeat effect -->
<i class="fa-solid fa-heart fa-beat"></i>

<!-- Vertical bounce -->
<i class="fa-solid fa-circle fa-bounce"></i>

<!-- Opacity fade -->
<i class="fa-solid fa-circle fa-fade"></i>

<!-- Horizontal shake -->
<i class="fa-solid fa-circle fa-shake"></i>

Customizing Animation Timing with CSS Variables

All Font Awesome 7 animation classes expose CSS custom properties for runtime configuration. Override these variables globally or per-element:

<style>
  .slow-spin {
    --fa-animation-duration: 5s;        /* Default is 2s */
    --fa-animation-timing: ease-in-out; /* Default is linear */
  }

  :root {
    --fa-animation-delay: 0.5s;         /* Universal delay */
  }
</style>

<i class="fa-solid fa-spinner fa-spin slow-spin"></i>

Available custom properties include --fa-animation-duration, --fa-animation-delay, --fa-animation-direction, --fa-animation-iteration-count, and --fa-animation-timing.

Reverse Spin and Direction Control

To rotate an icon counter-clockwise, use the fa-spin-reverse class. As implemented in lines 68-70 of _animated.scss, this class sets --fa-animation-direction: reverse:

<i class="fa-solid fa-spinner fa-spin fa-spin-reverse"></i>

Alternatively, manually set the custom property for granular control:

<i class="fa-solid fa-spinner fa-spin" style="--fa-animation-direction: reverse;"></i>

Summary

• Font Awesome 7 animation classes (fa-spin, fa-pulse, fa-beat, fa-bounce, fa-fade, fa-shake) are defined in scss/_animated.scss and imported via scss/fontawesome.scss
• The system uses CSS custom properties (variables) for configuration, allowing runtime customization of duration, delay, and timing without recompiling SCSS
• All animations respect the prefers-reduced-motion media query automatically, ensuring accessibility compliance
• The fa-spin-reverse class provides counter-clockwise rotation by manipulating the --fa-animation-direction variable
• Default timing varies by animation type: continuous rotation uses linear 2s timing, while pulse uses steps(8) and bounce uses custom cubic-bezier curves

Frequently Asked Questions

How do I change the speed of a Font Awesome 7 animation?

Adjust the --fa-animation-duration CSS custom property on the icon element or a parent container. The default duration is 2 seconds for most animations, but you can override it inline (style="--fa-animation-duration: 5s") or via a CSS class. This variable is consumed by the animation declarations in scss/_animated.scss.

What is the difference between fa-spin and fa-pulse?

fa-spin applies a smooth, continuous 360-degree rotation using linear timing, while fa-pulse uses the same rotation but with steps(8) timing function, creating an 8-step mechanical animation rather than fluid motion. Both classes reference the same @keyframes definition but alter the animation-timing-function property via CSS variables.

Does Font Awesome 7 support reduced motion preferences?

Yes. The source code in scss/_animated.scss (lines 81-96) contains a @media (prefers-reduced-motion: reduce) query that sets animation: none !important for all animated icons. This automatically disables motion for users who have enabled reduced motion settings in their operating system, requiring no additional code from developers.

Can I combine multiple animation classes on one icon?

While technically possible by adding multiple classes (e.g., fa-beat fa-fade), Font Awesome 7 applies separate animation properties that may conflict or compound unexpectedly. For complex combinations, define a custom animation in your stylesheet that references the keyframes from _animated.scss, or adjust the --fa-animation-* custom properties to create hybrid effects.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}