-
Notifications
You must be signed in to change notification settings - Fork 195
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
38 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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,47 +45,62 @@ 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 | ||
| <i class="fa fa-wrench faa-wrench animated faa-fast"></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> 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/[email protected]/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>| | ||
| <!--link rel="stylesheet" href="http://localhost:8080/css/font-awesome-animation.css"--> | ||
|
|
||
| | 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 | ||
|
|
||