2021-01-23 04:11:11 +08:00
|
|
|
# font-awesome-animation
|
2021-01-22 03:25:01 +08:00
|
|
|
|
2014-01-22 06:03:43 +08:00
|
|
|
> Simple animations using some CSS3 I found on the web.
|
2021-01-23 04:11:11 +08:00
|
|
|
> Best used on glyphicons like [FontAwesome][]
|
|
|
|
|
|
|
|
![build](https://github.com/l-lin/font-awesome-animation/workflows/build/badge.svg)
|
|
|
|
[![npm](https://img.shields.io/npm/v/font-awesome-animation.svg)][npm-link]
|
|
|
|
[![npm](https://img.shields.io/npm/dm/font-awesome-animation.svg)][npm-link]
|
|
|
|
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/font-awesome-animation/badge?style=rounded)][cdn-link]
|
2014-01-22 06:03:43 +08:00
|
|
|
|
2021-01-22 03:25:01 +08:00
|
|
|
## Getting started
|
2014-01-22 06:03:43 +08:00
|
|
|
|
2021-01-23 04:11:11 +08:00
|
|
|
Install from NPM:
|
2020-04-01 04:12:54 +08:00
|
|
|
|
|
|
|
```bash
|
2021-01-22 03:25:01 +08:00
|
|
|
npm install font-awesome-animation
|
2014-01-22 06:03:43 +08:00
|
|
|
```
|
|
|
|
|
2021-01-23 04:11:11 +08:00
|
|
|
Or with a CDN:
|
|
|
|
|
|
|
|
[https://www.jsdelivr.com/package/npm/font-awesome-animation][cdn-link]
|
|
|
|
|
|
|
|
Include CSS file in your index.html file:
|
2020-04-01 04:12:54 +08:00
|
|
|
|
2014-01-22 06:03:43 +08:00
|
|
|
```html
|
|
|
|
<link rel="stylesheet" href="font-awesome-animation.min.css">
|
|
|
|
```
|
|
|
|
|
2021-01-22 03:25:01 +08:00
|
|
|
## Usage
|
2021-01-23 04:52:01 +08:00
|
|
|
### On DOM load
|
2021-01-22 03:25:01 +08:00
|
|
|
|
2021-01-23 04:52:01 +08:00
|
|
|
Add the desired CSS class `faa-xxx` along with `animated` to the icon (or any element of your DOM):
|
|
|
|
|
|
|
|
```html
|
|
|
|
<i class="fa fa-wrench faa-wrench animated"></i>
|
|
|
|
```
|
|
|
|
|
|
|
|
### On hover
|
|
|
|
|
|
|
|
Instead of using `animated`, use the `animated-hover` CSS class:
|
|
|
|
|
|
|
|
```html
|
|
|
|
<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:
|
|
|
|
|
|
|
|
```html
|
|
|
|
<a href="#" class="faa-parent animated-hover">
|
|
|
|
<i class="fa fa-wrench faa-wrench"></i>
|
|
|
|
</a>
|
|
|
|
```
|
|
|
|
|
|
|
|
You can regulate the speed of the animation by adding the CSS class `faa-fast` or `faa-slow`:
|
|
|
|
|
|
|
|
```html
|
|
|
|
<i class="fa fa-wrench faa-wrench animated faa-fast"></i>
|
|
|
|
<i class="fa fa-wrench faa-wrench animated faa-slow"></i>
|
|
|
|
```
|
2014-01-22 06:03:43 +08:00
|
|
|
|
2021-01-22 03:25:01 +08:00
|
|
|
## Development
|
|
|
|
|
2020-04-01 04:12:54 +08:00
|
|
|
```bash
|
2021-01-22 03:25:01 +08:00
|
|
|
# install dependencies
|
2020-04-01 04:12:54 +08:00
|
|
|
npm install
|
|
|
|
|
2021-01-22 03:25:01 +08:00
|
|
|
# generate prefixes and minified CSS files
|
|
|
|
npm run build
|
2014-04-17 05:54:21 +08:00
|
|
|
```
|
|
|
|
|
2021-01-22 03:25:01 +08:00
|
|
|
## License
|
|
|
|
|
|
|
|
[MIT License](LICENSE)
|
2020-04-01 04:12:54 +08:00
|
|
|
|
2021-01-23 04:11:11 +08:00
|
|
|
[FontAwesome]: https://fontawesome.com/
|
|
|
|
[npm-link]: https://www.npmjs.com/package/font-awesome-animation
|
2021-01-23 04:15:21 +08:00
|
|
|
[cdn-link]: https://www.jsdelivr.com/package/npm/font-awesome-animation
|
2021-01-23 04:11:11 +08:00
|
|
|
|