# Animating Icons Learn how to add animations to Font Awesome icons for dynamic visual effects. > Our Styling Toolkit takes the trouble out of sizing, rotating, and stacking icons, so you can make your site pop with animations. In this doc, we'll cover how to make your icons **beat, fade, flip, spin, buzz, float, jello, swing, wag, and more** with our animations, so that you can create more visual interest on your site. Make sure you're: - [Set up with Font Awesome](/web.md#web-setup) in your project. - Familiar with the basics of [adding Font Awesome icons](/web/add-icons/how-to.md).

Seeing display issues with animated icons in Safari?

Safari clips some animated icons when you're using Web Fonts + CSS. It's a WebKit bug. [Here's the fix.](#safari-bug-with-animating-icons) ## Animations ### Beat Use the `fa-beat` animation to scale an icon up or down. This is useful for grabbing attention or for use with health/heart-centric icons.

```html

``` #### Beat Utilities | Utility | Details | | :---------------- | :----------------------------------------------------------------------- | | `--fa-beat-scale` | Set max value that an icon will scale (number with `1` being no scaling) | ### Fade Use the `fa-fade` animation to fade an icon in and out visually to grab attention in a subtle (or not so subtle) way.

```html

``` #### Fade Utilities | Utility | Details | | :------------------ | :---------------------------------------------------------------------------------- | | `--fa-fade-opacity` | Set lowest opacity value an icon will fade to and from (number between `0` and `1`) | ### Beat-Fade Use the `fa-beat-fade` animation to grab attention by visually scaling and pulsing an icon in and out.

```html

``` #### Beat-Fade Utilities | Utility | Details | | :----------------------- | :---------------------------------------------------------------------------------- | | `--fa-beat-fade-opacity` | Set lowest opacity value an icon will fade to and from (number between `0` and `1`) | | `--fa-beat-fade-scale` | Set max value that an icon will scale (number with `1` being no scaling) | ### Bounce Use the `fa-bounce` animation to grab attention by visually bouncing an icon up and down.

```html

``` #### Bounce Utilities | Utility | Details | | :-------------------------- | :--------------------------------------------------------------------------------------------------- | | `--fa-bounce-rebound` | Set the amount of rebound an icon has when landing after the jump (number with `0` being no rebound) | | `--fa-bounce-anticipation` | Set the amount of squish before an icon jumps in length units (px, rem, etc) | | `--fa-bounce-height` | Set the max height an icon will jump to when bouncing in length units (px, rem, etc) | | `--fa-bounce-start-scale-x` | Set horizontal distortion when starting to bounce (number with `1` being no distortion) | | `--fa-bounce-start-scale-y` | Set vertical distortion when starting to bounce (number with `1` being no distortion) | | `--fa-bounce-jump-scale-x` | Set horizontal distortion at the top of the jump (number with `1` being no distortion) | | `--fa-bounce-jump-scale-y` | Set vertical distortion at the top of the jump (number with `1` being no distortion) | | `--fa-bounce-land-scale-x` | Set horizontal distortion when landing after the jump (number with `1` being no distortion) | | `--fa-bounce-land-scale-y` | Set vertical distortion when landing after the jump (number with `1` being no distortion) | New! ### Buzz The `fa-buzz` animation is a fast, tight vibration with rapid decay. Use the Buzz animation for quick attention without being loud - a phone buzzing on a table, an expiring timer. Available in Version 7.3 and later.

```html

``` #### Buzz Utilities | Utility | Details | | :------------------- | :----------------------------------------------------------- | | `--fa-buzz-distance` | Set distance of the vibration in length units (px, rem, etc) | ### Flip Use the `fa-flip` animation to [rotate an icon in 3D space](). By default, flip rotates an icon about the Y axis 180 degrees. Flipping is helpful for transitions, processing states, or for using physical objects that one flips in the real world.

```html

``` New! #### Flip 360 An extension of the `fa-flip` animation, `fa-flip-360` lets you flip the icon all the way around in a smooth animation. Give your flips some extra oomph. The same utilities are available for both flip animations. Available in Version 7.3 and later.

```html

``` #### Flip Utilities | Utility | Details | | :---------------- | :------------------------------------------------------------------------------------------------------------------- | | `--fa-flip-x` | Set x-coordinate of the axis of rotation (number between `0` and `1`) | | `--fa-flip-y` | Set y-coordinate of the axis of rotation (number between `0` and `1`) | | `--fa-flip-z` | Set z-coordinate of the axis of rotation (number between `0` and `1`) | | `--fa-flip-angle` | Adjust the flip rotation in degrees. Positive angle for a clockwise rotation, a negative angle for counter-clockwise | New! ### Float The `fa-float` animation is a slow, spooky addition to the Font Awesome animations. Great for empty spaces, subtle attention, and adding a bit of playful lightness to your UI. Available in Version 7.3 and later.

```html

``` #### Float Utilities | Utility | Details | | :-------------------------------------------------------------- | :--------------------------------------------------------------------------------- | | `--fa-float-height` | Set height of the vertical motion in length units (px, rem, etc) | | `--fa-float-drift` | Set horizontal drift distance in length units (px, rem, etc) | | `--fa-float-tilt` | Set tilt during drift in degrees | | `--fa-float-squash-x` | Set horizontal distortion at bottom of hover (number with `1` being no distortion) | | `--fa-float-squash-y` | Set vertical distortion at bottom of hover (number with `1` being no distortion) | | `--fa-float-stretch-x` | Set horizontal distortion at top of apex (number with `1` being no distortion) | | `--fa-float-stretch-y` | Set vertical distortion at top of apex (number with `1` being no distortion) | New! ### Jello Add some playful fun to your UI with the `fa-jello` animation. Nothing jiggles like a bowl of `fa-jello`! Great for calling attention to something new, fun, interactive. Available in Version 7.3 and later.

```html

``` #### Jello Utilities | Utility | Details | | :------------------- | :--------------------------------------------------------------------- | | `--fa-jello-scale-x` | Adjust the horizontal distortion (number with `1` being no distortion) | | `--fa-jello-scale-y` | Adjust the vertical distortion (number with `1` being no distortion) | ### Shake Use the `fa-shake` animation to grab attention or note that something is not allowed by shaking an icon back and forth.

```html

``` Updated! ### Spin and Spin-snap So you need an icon to spin? We gotcha covered! We have a bunch of spin animations that let you pick the right spin for your situation. If you would like a reverse spin, you can add the `fa-spin-reverse` to any of our spin animations. Spin animations are great for loading states, but can be used to add circular motion to any part of your UI. These animations work especially well with icons in the [spinner icons category](https://fontawesome.com/search?d=gallery&p=1&c=spinners).

```html

* Available in Version 7.3 and later.

We've deprecated fa-pulse

The `fa-pulse` animation class that we used on previous versions of Font Awesome still works. But we've decided to rename it to `fa-spin-pulse`. We think that name is a more accurate description and will refer to it as "spin-pulse" from now on. New! ### Swing The `fa-swing` animation is a subtle dangle with a slow decay. Use the Swing animation for subtle attention - great for things that physically dangle, like keys, clothes hangers, or bells. Available in Version 7.3 and later.

```html

``` #### Swing Utilities | Utility | Details | | :----------------- | :-------------------------------- | | `--fa-swing-angle` | Set angle of the swing in degrees | New! ### Wag The `fa-wag` animation is a cousin of the swing animation - the top of the icon wags with a slow decay. You can also use the Wag animation for subtle attention - great for things that physically wag or wobble, like hands. Available in Version 7.3 and later.

```html

``` #### Wag Utilities | Utility | Details | | :--------------- | :------------------------------ | | `--fa-wag-angle` | Set angle of the wag in degrees | --- ## Accessibility and Animations Using animations on the web in the most accessible way requires a little extra consideration: In general, it's best to use animations on the web in a complementary way rather than the only way to note a state change in UI. Remember to update the text of actions and change elements' other visual aspects too! And when it comes to an animation's timing and duration, avoid changing the state of something at a rate of three times per second or greater - which can trigger photosensitive epilepsy. All included animations now support and leverage the `prefers-reduced-motion` [CSS media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) to detect if a user has requested that the system minimize the amount of non-essential motion it uses. | Case | How It Affects Included Animations | | :-------------------------- | :--------------------------------- | | No preference set (default) | Animations will render as expected | | Preference set to `reduce` | Animations will be disabled | When `prefers-reduced-motion` is set to `reduce`, it indicates that the user prefers less motion, which may trigger discomfort for those with vestibular motion disorders on the page.

Help, my icons are not animating!

Make sure your system's settings are not preventing your icons from being animated. You can check it or [change it in user preferences](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences). If you still have problems you can reach out to our support team. ## Customizing Animations We've added [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) to make customizing easier and more efficient, and you can use these custom properties across all of our animations. Define your own values for the following properties to [override and customize](/web/style/custom.md#using-custom-properties-in-a-project) Font Awesome's defaults. | CSS Custom Property | Details | Accepted Values | | :------------------------------- | :---------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------- | | `--fa-animation-delay` | Set an initial delay for animation | Any valid [CSS animation-delay value](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay) | | `--fa-animation-direction` | Set direction for animation | Any valid [CSS animation-direction value](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction) | | `--fa-animation-duration` | Set duration for animation | Any valid [CSS animation-duration value](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) | | `--fa-animation-iteration-count` | Set number of iterations for animation | Any valid [CSS animation-iteration-count value](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count) | | `--fa-animation-timing` | Set how the animation progresses through frames | Any valid [CSS animation-timing-function value](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) |

```html

``` ## Troubleshooting ### Icon Animation + Wobbles We've worked hard to keep icons perfectly centered when they spin or pulse. However, we've seen **issues with several browsers with the Web Fonts + CSS method of Font Awesome**. This appears to be an issue with web fonts in general and not something we can directly fix. We do have a couple of ways you might be able to work around this: - **Set the display of the animating icon** — Use `display: block;` where you can. This seems to help a lot with this issue. - **Use multiples of 16px (the base font size)** — We've noticed the wobble is more noticeable otherwise. - **Switch Frameworks** — Switch to the SVG with JavaScript method; it's working a lot better for this. ### Conflicts with animate.css Older versions of [animate.css](https://animate.style) also used the `fast` CSS class selector to control the speed of animations. Since Font Awesome also uses this class selector, they conflict with each other. You can fix this by upgrading animate.css to a new version or you can add this exception into your CSS somewhere to work around the issues. ```css .animated.fast { font-family: inherit; } ``` ### Safari Bug with Animating Icons Some icons get visually cut off in Safari when their glyph reaches past the grid of our [Icon Canvas](/web/style/icon-canvas.md). It's [a WebKit bug](https://bugs.webkit.org/show_bug.cgi?id=294556), still open. Three things have to line up before you hit it: - The icon uses the **Web Fonts + CSS** method. SVG + JS, sprites, and SVG files are fine. - The icon renders in **Safari**. Nothing else is affected. - The icon is **animated**. Sitting still, the same icon renders fine. #### The Fix: Canvas Sizing Classes (Version 7.3 and Above) Add a [canvas sizing class](/web/style/icon-canvas.md#adjusting-canvas-sizing) to the affected icon. It pads the canvas on the icon element itself, which gives Safari the room it needs to paint the whole glyph. The glyph layers never move, so this is safe everywhere. Use `fa-canvas-roomy` for animations that scale the icon up, like `fa-beat`. `fa-canvas-square` covers the rest. ```html ```

See the bug and the fix in Safari

We render icons on this site with SVG + JS, which never crops, so there's nothing to show you here. Open the [Web Fonts + CSS demo on CodePen](https://codepen.io/fontawesome/pen/MYJPvQb) in Safari instead. #### On Earlier 7.x Versions: Pad the Icon Element Stuck below 7.3? Backport the rules. These are the exact declarations 7.3 ships, so upgrading later is a delete-and-rename. ```css /* Backport of Version 7.3's canvas sizing classes. Delete these and switch to fa-canvas-square / fa-canvas-roomy after upgrading. */ .fa-fix-canvas-square { padding-block: 0.125em; margin-block-end: -0.125em; } .fa-fix-canvas-roomy { padding-block: 0.25em; padding-inline: 0.125em; margin-block-end: -0.25em; box-sizing: content-box; } ``` ```html ``` Don't bother scoping this to Safari. The padding sits on the icon element, where it's harmless in every browser. That's why the shipped classes aren't scoped either.

Pad the icon element, not its pseudo-elements

Older versions of this page told you to pad `::before`. Pad the icon element instead. Unscoped padding on an icon's pseudo-elements is what caused [Font-Awesome#20862](https://github.com/FortAwesome/Font-Awesome/issues/20862), where a Duotone icon's two layers drift about a device pixel apart in Chromium.