# 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
hover mouse here
```
hover mouse here
### Animation speed
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](https://l-lin.github.io/font-awesome-animation/#animation-list) 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
```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