FlandreScarle7/font-awesome-animation
1
0
Fork 0
mirror of https://github.com/l-lin/font-awesome-animation.git synced 2024-12-27 14:01:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

doc: improve README.md

Browse Source
This commit is contained in:
Louis Lin 2021-01-24 12:20:20 +01:00
parent 82d43d8eef
commit 97a70b8c7f
1 changed files with 37 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
README.md
View File

@ -35,6 +35,8 @@ Add the desired CSS class `faa-xxx` along with `animated` to the icon (or any el
<i class="fa fa-wrench faa-wrench animated"></i> <i class="fa fa-wrench faa-wrench animated"></i>
``` ```
<i class="fa fa-wrench faa-wrench animated" style="font-size: 3em;"></i>
### On hover ### On hover
Instead of using `animated`, use the `animated-hover` CSS class: Instead of using `animated`, use the `animated-hover` CSS class:
@ -43,16 +45,24 @@ Instead of using `animated`, use the `animated-hover` CSS class:
<i class="fa fa-wrench faa-wrench animated-hover"></i> <i class="fa fa-wrench faa-wrench animated-hover"></i>
``` ```
<i class="fa fa-wrench faa-wrench animated-hover" style="font-size: 3em;"></i>
### On parent element hover ### On parent element hover
For parent hover, add the CSS class `faa-parent` and `animated-hover` on the parent element: For parent hover, add the CSS class `faa-parent` and `animated-hover` on the parent element:
```html ```html
<a href="#" class="faa-parent animated-hover"> <a href="#" class="faa-parent animated-hover">
<i class="fa fa-wrench faa-wrench"></i> <i class="fa fa-wrench faa-wrench" style="font-size: 3em;"></i>&nbsp;hover mouse here
</a> </a>
``` ```
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-wrench faa-wrench" style="font-size: 3em;"></i>&nbsp;hover mouse here
</a>
### Animation speed
You can regulate the speed of the animation by adding the CSS class `faa-fast` or `faa-slow`: You can regulate the speed of the animation by adding the CSS class `faa-fast` or `faa-slow`:
```html ```html
@ -60,30 +70,37 @@ You can regulate the speed of the animation by adding the CSS class `faa-fast` o
<i class="fa fa-wrench faa-wrench animated faa-slow"></i> <i class="fa fa-wrench faa-wrench animated faa-slow"></i>
``` ```
<i class="fa fa-wrench faa-wrench animated faa-fast" style="font-size: 3em;"></i>&nbsp;fast&nbsp;
<i class="fa fa-wrench faa-wrench animated faa-slow" style="font-size: 3em;"></i>&nbsp;slow
## Animation list ## 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@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="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"> <!--link rel="stylesheet" href="http://localhost:8080/css/font-awesome-animation.css"-->
| On DOM Load | On hover | On parent hover | | Animation | Preview | Fast | Slow |
|-------------|----------|-----------------| |-----------|---------|------|------|
|<a href="#"><i class="fa fa-wrench faa-wrench animated"></i>&nbsp;faa-wrench animated</a>|<a href="#"><i class="fa fa-wrench faa-wrench animated-hover"></i>&nbsp;faa-wrench animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-wrench faa-wrench"></i>&nbsp;faa-wrench</a>| |`faa-wrench`|<i class="fa fa-wrench faa-wrench animated" style="font-size: 2em"></i>|<i class="fa fa-wrench faa-wrench animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-wrench faa-wrench animated faa-slow" style="font-size: 2em"></i>|
|<a href="#"><i class="fa fa-bell faa-ring animated"></i>&nbsp;faa-ring animated</a>|<a href="#"><i class="fa fa-bell faa-ring animated-hover"></i>&nbsp;faa-ring animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-bell faa-ring"></i>&nbsp;faa-ring</a>| |`faa-ring`|<i class="fa fa-bell faa-ring animated" style="font-size: 2em"></i>|<i class="fa fa-bell faa-ring animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-bell faa-ring animated faa-slow" style="font-size: 2em"></i>|
|<a href="#"><i class="fa fa-envelope faa-horizontal animated"></i>&nbsp;faa-horizontal animated</a>|<a href="#"><i class="fa fa-envelope faa-horizontal animated-hover"></i>&nbsp;faa-horizontal animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-envelope faa-horizontal"></i>&nbsp;faa-horizontal</a>| |`faa-horizontal`|<i class="fa fa-envelope faa-horizontal animated" style="font-size:2em"></i>|<i class="fa fa-envelope faa-horizontal animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-envelope faa-horizontal animated faa-slow" style="font-size: 2em"></i>|
|<a href="#"><i class="fa fa-thumbs-o-up faa-vertical animated"></i>&nbsp;faa-vertical animated</a>|<a href="#"><i class="fa fa-thumbs-o-up faa-vertical animated-hover"></i>&nbsp;faa-vertical animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-thumbs-o-up faa-vertical"></i>&nbsp;faa-vertical</a>| |`faa-horizontal faa-reverse`|<i class="fa fa-envelope faa-horizontal animated faa-reverse" style="font-size: 2em"></i>|<i class="fa fa-envelope faa-horizontal animated faa-reverse faa-fast" style="font-size: 2em"></i>|<i class="fa fa-envelope faa-horizontal animated faa-reverse faa-slow" style="font-size: 2em"></i>|
|<a href="#"><i class="fa fa-warning faa-flash animated"></i>&nbsp;faa-flash animated</a>|<a href="#"><i class="fa fa-warning faa-flash animated-hover"></i>&nbsp;faa-flash animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-warning faa-flash"></i>&nbsp;faa-flash</a>| |`faa-vertical`|<i class="fa fa-thumbs-o-up faa-vertical animated" style="font-size: 2em"></i>|<i class="fa fa-thumbs-o-up faa-vertical animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-thumbs-o-up faa-vertical animated faa-slow" style="font-size: 2em"></i>|
|<a href="#"><i class="fa fa-thumbs-o-up faa-bounce animated"></i>&nbsp;faa-bounce animated</a>|<a href="#"><i class="fa fa-thumbs-o-up faa-bounce animated-hover"></i>&nbsp;faa-bounce animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-thumbs-o-up faa-bounce"></i>&nbsp;faa-bounce</a>| |`faa-flash`|<i class="fa fa-warning faa-flash animated" style="font-size: 2em"></i>|<i class="fa fa-warning faa-flash animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-warning faa-flash animated faa-slow" style="font-size: 2em"></i>|
|<a href="#"><i class="fa fa-spinner faa-spin animated"></i>&nbsp;faa-spin animated</a>|<a href="#"><i class="fa fa-spinner faa-spin animated-hover"></i>&nbsp;faa-spin animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-spinner faa-spin"></i>&nbsp;faa-spin</a>| |`faa-bounce`|<i class="fa fa-thumbs-o-up faa-bounce animated" style="font-size: 2em"></i>|<i class="fa fa-thumbs-o-up faa-bounce animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-thumbs-o-up faa-bounce animated faa-slow" style="font-size: 2em"></i>|
|<a href="#"><i class="fa fa-plane faa-float animated"></i>&nbsp;faa-float animated</a>|<a href="#"><i class="fa fa-plane faa-float animated-hover"></i>&nbsp;faa-float animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-plane faa-float"></i>&nbsp;faa-float</a>| |`faa-bounce faa-reverse`|<i class="fa fa-thumbs-o-down faa-bounce faa-reverse animated" style="font-size: 2em"></i>|<i class="fa fa-thumbs-o-down faa-bounce faa-reverse animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-thumbs-o-down faa-bounce faa-reverse animated faa-slow" style="font-size: 2em"></i>|
|<a href="#"><i class="fa fa-heart faa-pulse animated"></i>&nbsp;faa-pulse animated</a>|<a href="#"><i class="fa fa-heart faa-pulse animated-hover"></i>&nbsp;faa-pulse animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-heart faa-pulse"></i>&nbsp;faa-pulse</a>| |`faa-spin`|<i class="fa fa-spinner faa-spin animated" style="font-size: 2em"></i>|<i class="fa fa-spinner faa-spin animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-spinner faa-spin animated faa-slow" style="font-size: 2em"></i>|
|<a href="#"><i class="fa fa-envelope faa-shake animated"></i>&nbsp;faa-shake animated</a>|<a href="#"><i class="fa fa-envelope faa-shake animated-hover"></i>&nbsp;faa-shake animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-envelope faa-shake"></i>&nbsp;faa-shake</a>| |`faa-spin faa-reverse`|<i class="fa fa-spinner faa-spin faa-reverse animated" style="font-size: 2em"></i>|<i class="fa fa-spinner faa-spin faa-reverse animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-spinner faa-spin faa-reverse animated faa-slow" style="font-size: 2em"></i>|
|<a href="#"><i class="fa fa-trophy faa-tada animated"></i>&nbsp;faa-tada animated</a>|<a href="#"><i class="fa fa-trophy faa-tada animated-hover"></i>&nbsp;faa-tada animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-trophy faa-tada"></i>&nbsp;faa-tada</a>| |`faa-float`|<i class="fa fa-plane faa-float animated" style="font-size: 2em"></i>|<i class="fa fa-plane faa-float animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-plane faa-float animated faa-slow" style="font-size: 2em"></i>|
|<a href="#"><i class="fa fa-space-shuttle faa-passing animated"></i>&nbsp;faa-passing animated</a>|<a href="#"><i class="fa fa-space-shuttle faa-passing animated-hover"></i>&nbsp;faa-passing animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-space-shuttle faa-passing"></i>&nbsp;faa-passing</a>| |`faa-pulse`|<i class="fa fa-heart faa-pulse animated" style="font-size: 2em"></i>|<i class="fa fa-heart faa-pulse animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-heart faa-pulse animated faa-slow" style="font-size: 2em"></i>|
|<a href="#"><i class="fa fa-space-shuttle faa-passing-reverse animated"></i>&nbsp;faa-passing-reverse animated</a>|<a href="#"><i class="fa fa-space-shuttle faa-passing-reverse animated-hover"></i>&nbsp;faa-passing-reverse animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-space-shuttle faa-passing-reverse"></i>&nbsp;faa-passing-reverse</a>| |`faa-shake`|<i class="fa fa-envelope faa-shake animated" style="font-size: 2em"></i>|<i class="fa fa-envelope faa-shake animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-envelope faa-shake animated faa-slow" style="font-size: 2em"></i>|
|<a href="#"><i class="fa fa-circle-o faa-burst animated"></i>&nbsp;faa-burst animated</a>|<a href="#"><i class="fa fa-circle-o faa-burst animated-hover"></i>&nbsp;faa-burst animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-circle-o faa-burst"></i>&nbsp;faa-burst</a>| |`faa-tada`|<i class="fa fa-trophy faa-tada animated" style="font-size: 2em"></i>|<i class="fa fa-trophy faa-tada animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-trophy faa-tada animated faa-slow" style="font-size: 2em"></i>|
|<a href="#"><i class="fa fa-star-o faa-falling animated"></i>&nbsp;faa-falling animated</a>|<a href="#"><i class="fa fa-star-o faa-falling animated-hover"></i>&nbsp;faa-falling animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-star-o faa-falling"></i>&nbsp;faa-falling</a>| |`faa-passing`|<i class="fa fa-space-shuttle faa-passing animated" style="font-size: 2em"></i>|<i class="fa fa-space-shuttle faa-passing animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-space-shuttle faa-passing animated faa-slow" style="font-size: 2em"></i>|
|<a href="#"><i class="fa fa-star-o faa-rising animated"></i>&nbsp;faa-rising animated</a>|<a href="#"><i class="fa fa-star-o faa-rising animated-hover"></i>&nbsp;faa-rising animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-star-o faa-rising"></i>&nbsp;faa-rising</a>| |`faa-passing faa-reverse`|<i class="fa fa-space-shuttle faa-passing faa-reverse animated" style="font-size: 2em"></i>|<i class="fa fa-space-shuttle faa-passing faa-reverse animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-space-shuttle faa-passing faa-reverse animated faa-slow" style="font-size: 2em"></i>|
|`faa-burst`|<i class="fa fa-circle-o faa-burst animated" style="font-size: 2em"></i>|<i class="fa fa-circle-o faa-burst animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-circle-o faa-burst animated faa-slow" style="font-size: 2em"></i>|
|`faa-falling`|<i class="fa fa-star-o faa-falling animated" style="font-size: 2em"></i>|<i class="fa fa-star-o faa-falling animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-star-o faa-falling animated faa-slow" style="font-size: 2em"></i>|
|`faa-falling faa-reverse`|<i class="fa fa-star-o faa-falling faa-reverse animated" style="font-size: 2em"></i>|<i class="fa fa-star-o faa-falling faa-reverse animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-star-o faa-falling faa-reverse animated faa-slow" style="font-size: 2em"></i>|
|`faa-rising`|<i class="fa fa-star-o faa-rising animated" style="font-size: 2em"></i>|<i class="fa fa-star-o faa-rising animated faa-fast" style="font-size: 2em"></i>|<i class="fa fa-star-o faa-rising animated faa-slow" style="font-size: 2em"></i>|
## Development ## Development
### Build ### Build