# 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:
```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
### On DOM load
Add the desired CSS class `faa-xxx` along with `animated` to the icon (or any element of your DOM):
```html
```
### On hover
Instead of using `animated`, use the `animated-hover` CSS class:
```html
```
### On parent element hover
For parent hover, add the CSS class `faa-parent` and `animated-hover` on the parent element:
```html
```
You can regulate the speed of the animation by adding the CSS class `faa-fast` or `faa-slow`:
```html
```
## 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
```bash
# 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
```sh
# this will create a new version and push to remote repository
npm version [ | major | minor | patch]
```
Then go to the [release page](https://github.com/l-lin/font-awesome-animation/releases) and manually
create a new release. There is an automatic [Github action](./.github/workflows/publish.yml) that
publishes automatically to NPM repository.
## License
[MIT License](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