font-awesome-animation

font-awesome-animation

Simple animations using some CSS3 I found on the web. Best used on glyphicons like FontAwesome

Getting started

Install from NPM:

npm install font-awesome-animation

Or with a CDN:

https://www.jsdelivr.com/package/npm/font-awesome-animation

Include CSS file in your index.html file:

<link rel="stylesheet" href="font-awesome-animation.min.css">

Usage

On DOM load

Add the desired CSS class faa-xxx along with animated to the icon (or any element of your DOM):

<i class="fa fa-wrench faa-wrench animated"></i>

On hover

Instead of using animated, use the animated-hover CSS class:

<i class="fa fa-wrench faa-wrench animated-hover"></i>

On parent element hover

For parent hover, add the CSS class faa-parent and animated-hover on the parent element:

<a href="#" class="faa-parent animated-hover">
  <i class="fa fa-wrench faa-wrench"></i>
</a>

You can regulate the speed of the animation by adding the CSS class faa-fast or faa-slow:

<i class="fa fa-wrench faa-wrench animated faa-fast"></i>
<i class="fa fa-wrench faa-wrench animated faa-slow"></i>

Animation list

On DOM Load	On hover	On parent hover
faa-wrench animated	faa-wrench animated-hover	faa-wrench
faa-ring animated	faa-ring animated-hover	faa-ring
faa-horizontal animated	faa-horizontal animated-hover	faa-horizontal
faa-vertical animated	faa-vertical animated-hover	faa-vertical
faa-flash animated	faa-flash animated-hover	faa-flash
faa-bounce animated	faa-bounce animated-hover	faa-bounce
faa-spin animated	faa-spin animated-hover	faa-spin
faa-float animated	faa-float animated-hover	faa-float
faa-pulse animated	faa-pulse animated-hover	faa-pulse
faa-shake animated	faa-shake animated-hover	faa-shake
faa-tada animated	faa-tada animated-hover	faa-tada
faa-passing animated	faa-passing animated-hover	faa-passing
faa-passing-reverse animated	faa-passing-reverse animated-hover	faa-passing-reverse
faa-burst animated	faa-burst animated-hover	faa-burst
faa-falling animated	faa-falling animated-hover	faa-falling
faa-rising animated	faa-rising animated-hover	faa-rising

Development

Build

# install dependencies
npm install

# generate prefixes and minified CSS files
npm run build

Local preview

To test in local, you can use:

• http-server: server local http server to the css/ folder
• any markdown preview to serve this README.md as a webpage (e.g. markdown-preview.nvim)

Release

# this will create a new version and push to remote repository
npm version [<newversion> | major | minor | patch]

Then go to the release page and manually create a new release. There is an automatic Github action that publishes automatically to NPM repository.

License

MIT License