From 97a70b8c7fadffaa68f5053839114e3d71e06096 Mon Sep 17 00:00:00 2001 From: Louis Lin Date: Sun, 24 Jan 2021 12:20:20 +0100 Subject: [PATCH] doc: improve README.md --- README.md | 57 ++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 37 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index e6347d1..e01ef66 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,8 @@ Add the desired CSS class `faa-xxx` along with `animated` to the icon (or any el ``` + + ### 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: ``` + + ### On parent element hover For parent hover, add the CSS class `faa-parent` and `animated-hover` on the parent element: ```html - +  hover mouse here ``` + + hover mouse here + + +### 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 ``` + fast  + slow + ## Animation list - + -| On DOM Load | On hover | On parent hover | -|-------------|----------|-----------------| -| faa-wrench animated| faa-wrench animated-hover| faa-wrench| -| faa-ring animated| faa-ring animated-hover| faa-ring| -| faa-horizontal animated| faa-horizontal animated-hover| faa-horizontal| -| faa-vertical animated| faa-vertical animated-hover| faa-vertical| -| faa-flash animated| faa-flash animated-hover| faa-flash| -| faa-bounce animated| faa-bounce animated-hover| faa-bounce| -| faa-spin animated| faa-spin animated-hover| faa-spin| -| faa-float animated| faa-float animated-hover| faa-float| -| faa-pulse animated| faa-pulse animated-hover| faa-pulse| -| faa-shake animated| faa-shake animated-hover| faa-shake| -| faa-tada animated| faa-tada animated-hover| faa-tada| -| faa-passing animated| faa-passing animated-hover| faa-passing| -| faa-passing-reverse animated| faa-passing-reverse animated-hover| faa-passing-reverse| -| faa-burst animated| faa-burst animated-hover| faa-burst| -| faa-falling animated| faa-falling animated-hover| faa-falling| -| faa-rising animated| faa-rising animated-hover| faa-rising| +| Animation | Preview | Fast | Slow | +|-----------|---------|------|------| +|`faa-wrench`|||| +|`faa-ring`|||| +|`faa-horizontal`|||| +|`faa-horizontal faa-reverse`|||| +|`faa-vertical`|||| +|`faa-flash`|||| +|`faa-bounce`|||| +|`faa-bounce faa-reverse`|||| +|`faa-spin`|||| +|`faa-spin faa-reverse`|||| +|`faa-float`|||| +|`faa-pulse`|||| +|`faa-shake`|||| +|`faa-tada`|||| +|`faa-passing`|||| +|`faa-passing faa-reverse`|||| +|`faa-burst`|||| +|`faa-falling`|||| +|`faa-falling faa-reverse`|||| +|`faa-rising`|||| ## Development ### Build