font-awesome-animation
Simple animations using some CSS3 I found on the web. Best used on glyphicons like FontAwesome
npm-link npm-link cdn-link
Getting started
Install from NPM:npm install font-awesome-animation
Or with a CDN:
https://www.jsdelivr.com/package/npm/font-awesome-animationcdn-link
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 classfaa-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 usinganimated
, 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 classfaa-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> hover mouse here
</a>
hover mouse here
Animation speed
You can regulate the speed of the animation by adding the CSS classfaa-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:- 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.