Animations

CSS animations for icons. Easy to use, regular or on hover, and lightweight <4kb minified and <1kb gzipped.

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

has 2 default animations (not included here):

fa-spin
fa-pulse
Code released under the MIT Licence.

Regular .faa

How to use?
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>
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
Examples:

On parent hover .faa-parent

How to use?
Add faa-animation-name class to the icon and faa-parent class to any ancestor. Hover over to start animation.
<div class="faa-parent"> <i class="fas fa-camera faa-bounce"></i> </div>
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
Examples: