mirror of
https://github.com/l-lin/font-awesome-animation.git
synced 2024-12-26 05:21:31 +08:00
doc: improve README.md
This commit is contained in:
parent
82d43d8eef
commit
97a70b8c7f
57
README.md
57
README.md
@ -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> hover mouse here
|
||||
</a>
|
||||
```
|
||||
|
||||
<a href="#" class="faa-parent animated-hover">
|
||||
<i class="fa fa-wrench faa-wrench" style="font-size: 3em;"></i> 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> fast
|
||||
<i class="fa fa-wrench faa-wrench animated faa-slow" style="font-size: 3em;"></i> 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> 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>|
|
||||
| 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
|
||||
|
Loading…
Reference in New Issue
Block a user