Skip to content

l-lin/font-awesome-animation

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

font-awesome-animation

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

build npm npm jsdelivr

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" style="font-size: 3em;"></i>&nbsp;hover mouse here
</a>
 hover mouse here

Animation speed

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>

 fast   slow

Animation list

Check the Github page to view the previews.

Animation Preview Fast Slow
faa-wrench
faa-ring
faa-horizontal
faa-horizontal faa-reverse
faa-vertical
faa-flash
faa-bounce
faa-bounce faa-reverse
faa-spin
faa-spin faa-reverse
faa-float
faa-pulse
faa-shake
faa-tada
faa-passing
faa-passing faa-reverse
faa-burst
faa-falling
faa-falling faa-reverse
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:

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