FlandreScarle7/font-awesome-animation
1
0
Fork 0
mirror of https://github.com/l-lin/font-awesome-animation.git synced 2024-12-26 21:41:31 +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" style="font-size: 3em;"></i>
### On hover
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" style="font-size: 3em;"></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>
<i class="fa fa-wrench faa-wrench" style="font-size: 3em;"></i>&nbsp;hover mouse here
</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`:
```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-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
<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">
<!--link rel="stylesheet" href="http://localhost:8080/css/font-awesome-animation.css"-->
| On DOM Load | On hover | On parent hover |
|-------------|----------|-----------------|
|<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>|
|<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>|
|<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>|
|<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>|
|<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>|
|<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>|
|<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>|
|<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>|
|<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>|
|<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>|
|<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>|
|<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>|
|<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>|
|<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>|
|<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>|
|<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>|
| Animation | Preview | Fast | Slow |
|-----------|---------|------|------|
|`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>|
|`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>|
|`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>|
|`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>|
|`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>|
|`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>|
|`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>|
|`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>|
|`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>|
|`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>|
|`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>|
|`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>|
|`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>|
|`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>|
|`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>|
|`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
### Build