mirror of
https://github.com/l-lin/font-awesome-animation.git
synced 2024-12-27 05:51:31 +08:00
127 lines
7.8 KiB
Markdown
127 lines
7.8 KiB
Markdown
# 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
|
|
<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):
|
|
|
|
```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>
|
|
```
|
|
|
|
## Animation list
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation/css/font-awesome-animation.min.css">
|
|
<link rel="stylesheet" href="http://localhost:8080/css/font-awesome-animation.min.css">
|
|
|
|
| On DOM Load | On hover | On parent hover |
|
|
|-------------|----------|-----------------|
|
|
|<a href="#"><i class="fa fa-wrench faa-wrench animated"></i> faa-wrench animated</a>|<a href="#"><i class="fa fa-wrench faa-wrench animated-hover"></i> faa-wrench animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-wrench faa-wrench"></i> faa-wrench</a>|
|
|
|<a href="#"><i class="fa fa-bell faa-ring animated"></i> faa-ring animated</a>|<a href="#"><i class="fa fa-bell faa-ring animated-hover"></i> faa-ring animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-bell faa-ring"></i> faa-ring</a>|
|
|
|<a href="#"><i class="fa fa-envelope faa-horizontal animated"></i> faa-horizontal animated</a>|<a href="#"><i class="fa fa-envelope faa-horizontal animated-hover"></i> faa-horizontal animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-envelope faa-horizontal"></i> faa-horizontal</a>|
|
|
|<a href="#"><i class="fa fa-thumbs-o-up faa-vertical animated"></i> faa-vertical animated</a>|<a href="#"><i class="fa fa-thumbs-o-up faa-vertical animated-hover"></i> faa-vertical animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-thumbs-o-up faa-vertical"></i> faa-vertical</a>|
|
|
|<a href="#"><i class="fa fa-warning faa-flash animated"></i> faa-flash animated</a>|<a href="#"><i class="fa fa-warning faa-flash animated-hover"></i> faa-flash animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-warning faa-flash"></i> faa-flash</a>|
|
|
|<a href="#"><i class="fa fa-thumbs-o-up faa-bounce animated"></i> faa-bounce animated</a>|<a href="#"><i class="fa fa-thumbs-o-up faa-bounce animated-hover"></i> faa-bounce animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-thumbs-o-up faa-bounce"></i> faa-bounce</a>|
|
|
|<a href="#"><i class="fa fa-spinner faa-spin animated"></i> faa-spin animated</a>|<a href="#"><i class="fa fa-spinner faa-spin animated-hover"></i> faa-spin animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-spinner faa-spin"></i> faa-spin</a>|
|
|
|<a href="#"><i class="fa fa-plane faa-float animated"></i> faa-float animated</a>|<a href="#"><i class="fa fa-plane faa-float animated-hover"></i> faa-float animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-plane faa-float"></i> faa-float</a>|
|
|
|<a href="#"><i class="fa fa-heart faa-pulse animated"></i> faa-pulse animated</a>|<a href="#"><i class="fa fa-heart faa-pulse animated-hover"></i> faa-pulse animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-heart faa-pulse"></i> faa-pulse</a>|
|
|
|<a href="#"><i class="fa fa-envelope faa-shake animated"></i> faa-shake animated</a>|<a href="#"><i class="fa fa-envelope faa-shake animated-hover"></i> faa-shake animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-envelope faa-shake"></i> faa-shake</a>|
|
|
|<a href="#"><i class="fa fa-trophy faa-tada animated"></i> faa-tada animated</a>|<a href="#"><i class="fa fa-trophy faa-tada animated-hover"></i> faa-tada animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-trophy faa-tada"></i> faa-tada</a>|
|
|
|<a href="#"><i class="fa fa-space-shuttle faa-passing animated"></i> faa-passing animated</a>|<a href="#"><i class="fa fa-space-shuttle faa-passing animated-hover"></i> faa-passing animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-space-shuttle faa-passing"></i> faa-passing</a>|
|
|
|<a href="#"><i class="fa fa-space-shuttle faa-passing-reverse animated"></i> faa-passing-reverse animated</a>|<a href="#"><i class="fa fa-space-shuttle faa-passing-reverse animated-hover"></i> faa-passing-reverse animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-space-shuttle faa-passing-reverse"></i> faa-passing-reverse</a>|
|
|
|<a href="#"><i class="fa fa-circle-o faa-burst animated"></i> faa-burst animated</a>|<a href="#"><i class="fa fa-circle-o faa-burst animated-hover"></i> faa-burst animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-circle-o faa-burst"></i> faa-burst</a>|
|
|
|<a href="#"><i class="fa fa-star-o faa-falling animated"></i> faa-falling animated</a>|<a href="#"><i class="fa fa-star-o faa-falling animated-hover"></i> faa-falling animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-star-o faa-falling"></i> faa-falling</a>|
|
|
|<a href="#"><i class="fa fa-star-o faa-rising animated"></i> faa-rising animated</a>|<a href="#"><i class="fa fa-star-o faa-rising animated-hover"></i> faa-rising animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-star-o faa-rising"></i> faa-rising</a>|
|
|
|
|
## 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 [<newversion> | 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
|
|
|