font-awesome-animation
Simple animations using FontAwesome and some CSS3.
Project maintained by l-lin Hosted on GitHub Pages — Theme by mattgraham
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" style="font-size: 3em;"></i> hover mouse here
</a>
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:
- 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.