From 82493ce04fa32f8f3b067e205fa81751e8d1431e Mon Sep 17 00:00:00 2001
From: Louis Lin <lin.louis@pm.me>
Date: Fri, 22 Jan 2021 21:52:01 +0100
Subject: [PATCH] doc: add usage

---
 README.md | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 92c3a7d..8b5479d 100644
--- a/README.md
+++ b/README.md
@@ -27,8 +27,38 @@ Include CSS file in your index.html file:
 ```
 
 ## Usage
+### On DOM load
 
-See [live demo](https://l-lin.github.com/font-awesome-animation).
+Add the desired CSS class `faa-xxx` along with `animated` to the icon (or any element of your DOM):
+
+```html
+<i class="fa fa-wrench faa-wrench animated"></i>
+```
+
+### On hover
+
+Instead of using `animated`, use the `animated-hover` CSS class:
+
+```html
+<i class="fa fa-wrench faa-wrench animated-hover"></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>
+</a>
+```
+
+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>
+```
 
 ## Development