Font Awesome Animations

CSS animations for Font Awesome (and other icon libraries!).

---

Status

---

View Preview

---

---

Table of contents

• Status
• Quick Start
• What's included
• Bugs and feature requests
• Installation
• How to Use
• Versioning
• Changelog
• Team
• Code of Conduct
• Copyright and License

---

Quick Start

Several options are available:

• Download the latest release.
• Clone the repo: git clone https://github.com/the-muda-organization/font-awesome-animations.git
• Install with Composer: composer require the-muda-organization/font-awesome-animations

---

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

There are no dependencies. Library is designed for Font Awesome 5. See below for Installation Guide and How to Use

fa-animations/
 │
 └─ dist/
    │
    ├── fa-animations.css
    └── fa-animations.min.css

---

Bugs and feature requests

Have a bug or a feature request? Before opening a new issue search for existing and closed issues. If your problem or idea is not addressed yet, open a new issue.

---

Installation

1. Download and copy files to your project
2. Add CSS to your project:

    <link href="https://example.com/fa-animations/1.x.x/fa-animations.min.css" rel="stylesheet">

3. Ready to use!

---

How to Use

Animations work with any Font Awesome prefix fad, fal, far and fas. Not tested on other icon librairies but it should work with little or no customization.

This library does not include default Font Awesome animations: fa-spin and fa-pulse.

Font Awesome Animations uses custom classes .faa or .faa-parent and custom prefix faa-.

There are 2 types of animations: regular and on hover.

A) Regular animations

Add faa and faa-animation-name classess to the icon.

<i class="fad fa-camera faa faa-bounce"></i>
<i class="fal fa-camera faa faa-pulse"></i>
<i class="far fa-camera faa faa-shake-x"></i>
<i class="fas fa-camera faa faa-tada"></i>

B) On hover animations

Add faa-animation-name class to the icon and faa-parent class to any ancestor element. Hover over to start animation.

<div class="faa-parent">
    <i class="fas fa-camera faa-bounce"></i>
</div>

<div class="faa-parent">
    
    <!--ICON 1-->
    <div class="some-class">
        <i class="fas fa-camera faa-bounce"></i>
    </div>
    
    <!--ICON 2-->
    <i class="fas fa-angle-double-right faa-slide-right"></i>
 
</div>

Available animations:

• faa-bounce
• faa-burst
• faa-falling
• faa-flash
• faa-flip-x
• faa-flip-y
• faa-float
• faa-pulse
• faa-ring
• faa-rubber-band
• faa-slide-left
• faa-slide-right
• faa-shake-x
• faa-shake-y
• faa-swing
• faa-tada

• Default Font Awesome animations fa-spin and fa-pulse.

---

Versioning

Font Awesome Animations will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format: <major>.<minor>.<patch>

---

Changelog

For last releases see detailed CHANGELOG.

---

Team

• Jakub Muda

---

Code of conduct

We will behave ourselves if you behave yourselves. For more details see our CODE OF CONDUCT.

---

Copyright and license

Code and documentation copyright 2017-2020 The MUDA Organization.

Code released under the MIT License.

---