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

> Explore Font Awesome 7 animation classes like spin beat bounce fade shake and pulse. Learn how to easily add dynamic visual effects to your icons with this comprehensive guide.

- Repository: [Font Awesome/Font-Awesome](https://github.com/FortAwesome/Font-Awesome)
- Tags: deep-dive
- Published: 2026-03-01

---

**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`](https://github.com/FortAwesome/Font-Awesome/blob/main/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`](https://github.com/FortAwesome/Font-Awesome/blob/main/scss/_animated.scss) and imported through the main [`scss/fontawesome.scss`](https://github.com/FortAwesome/Font-Awesome/blob/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`](https://github.com/FortAwesome/Font-Awesome/blob/main/_variables.scss)

The animation system relies on global SCSS variables defined in **[`scss/_variables.scss`](https://github.com/FortAwesome/Font-Awesome/blob/main/scss/_variables.scss)**. This file establishes the CSS prefix and default animation parameters that propagate throughout the framework.

```scss
$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`](https://github.com/FortAwesome/Font-Awesome/blob/main/_animated.scss)

The **[`scss/_animated.scss`](https://github.com/FortAwesome/Font-Awesome/blob/main/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:

```scss
.#{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`](https://github.com/FortAwesome/Font-Awesome/blob/main/_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`](https://github.com/FortAwesome/Font-Awesome/blob/main/_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:

```scss
@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`](https://github.com/FortAwesome/Font-Awesome/blob/main/_animated.scss) implement a critical accessibility feature. A media query automatically disables all animations when the user's operating system prefers reduced motion:

```scss
@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:

```html
<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:

```html
<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`](https://github.com/FortAwesome/Font-Awesome/blob/main/_animated.scss), this class sets `--fa-animation-direction: reverse`:

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

```

Alternatively, manually set the custom property for granular control:

```html
<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`](https://github.com/FortAwesome/Font-Awesome/blob/main/scss/_animated.scss) and imported via [`scss/fontawesome.scss`](https://github.com/FortAwesome/Font-Awesome/blob/main/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`](https://github.com/FortAwesome/Font-Awesome/blob/main/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`](https://github.com/FortAwesome/Font-Awesome/blob/main/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`](https://github.com/FortAwesome/Font-Awesome/blob/main/_animated.scss), or adjust the `--fa-animation-*` custom properties to create hybrid effects.