font-awesome-animation

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

!build
![npm][npm-link]
![npm][npm-link]
![jsdelivr][cdn-link]

Getting started

Install from NPM:

``bash
npm install font-awesome-animation
`

Or with a CDN:

[https://www.jsdelivr.com/package/npm/font-awesome-animation][cdn-link]

Include CSS file in your index.html file:

`html

`

Usage

$3

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

`html

`

$3

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

`html

`

$3

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

`html

 hover mouse here

`


 hover mouse here


$3

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

`html


`

 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

$3

`bash


install dependencies

npm install

generate prefixes and minified CSS files

npm run build
`

$3

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][])

$3

`sh


this will create a new version and push to remote repository


npm version [ | 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

[cdn-link]: https://www.jsdelivr.com/package/npm/font-awesome-animation
[FontAwesome]: https://fontawesome.com/
[http-server]: https://www.npmjs.com/package/http-server
[markdown-preview.nvim]: https://github.com/iamcco/markdown-preview.nvim
[npm-link]: https://www.npmjs.com/package/font-awesome-animation