feat(#30): add fa-rising

README.md

@@ -8,18 +8,22 @@ Getting started
 Download
 ----------------
 ### Manually
+
 The files can be downloaded from:
+
 * Minified [CSS](https://raw.githubusercontent.com/l-lin/font-awesome-animation/master/dist/font-awesome-animation.min.css) for production usage
 * Un-minified [CSS](https://raw.githubusercontent.com/l-lin/font-awesome-animation/master/dist/font-awesome-animation.css) for development
 
 ### With BowerJS
-```
+
-$ bower install font-awesome-animation
+```bash
+bower install font-awesome-animation
 ```
 
 Installation
 ----------------
 Include CSS file in your index.html file: 
+
 ```html
 <link rel="stylesheet" href="font-awesome-animation.min.css">
 ```
@@ -32,22 +36,25 @@ Development
 ================
 This project is using:
 * [GruntJS](http://gruntjs.com/) for adding prefixes and minification purpose
-* the CSS preprocessor [Myth](http://www.myth.io/) to generate the the prefixes for common browsers
+* the CSS preprocessor [Myth](http://www.myth.io/) to generate the prefixes for common browsers
 
 Getting started
 ----------------
 You will need to install the dependencies:
-```
+
-$ npm install
+```bash
+npm install
 ```
 
 Build
 ----------------
 You can generate the CSS file with prefixes and the minified CSS file by executing the following command:
-```
+
-$ grunt
+```bash
+grunt
 ```
 
 License
 ================
+
 [MIT License](http://en.wikipedia.org/wiki/MIT_License)

demo/partials/usage.html

@@ -326,5 +326,25 @@
             </a>
         </div>
     </div>
+    <div class="col-md-12">
+        <div class="col-md-4">
+            <a href="#">
+                <i class="fas fa-rocket faa-rising animated"></i>
+                &nbsp;faa-rising animated
+            </a>
+        </div>
+        <div class="col-md-4">
+            <a href="#">
+                <i class="fas fa-rocket faa-rising animated-hover"></i>
+                &nbsp;faa-rising animated-hover
+            </a>
+        </div>
+        <div class="col-md-4">
+            <a href="#" class="faa-parent animated-hover">
+                <i class="fas fa-rocket faa-rising"></i>
+                &nbsp;faa-rising
+            </a>
+        </div>
+    </div>
 </div>
 <div class="clear"></div>

src/_font-awesome-animation.scss

@@ -345,7 +345,6 @@
     50% {transform:translateY(0%); opacity:1}
     100% {transform:translateY(50%); opacity:0}
 }
-
 .faa-falling.animated,
 .faa-falling.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-falling {
@@ -361,3 +360,26 @@
 .faa-parent.animated-hover:hover > .faa-falling.faa-slow {
   animation: falling 3s linear infinite;
 }
+
+/* RISING */
+@keyframes rising {
+    0% {transform:translateY(50%); opacity:0}
+    50% {transform:translateY(0%); opacity:1}
+    100% {transform:translateY(-50%); opacity:0}
+}
+.faa-rising.animated,
+.faa-rising.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-rising {
+  animation: rising 2s linear infinite;
+}
+.faa-rising.animated.faa-fast,
+.faa-rising.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-rising.faa-fast {
+  animation: rising 1s linear infinite;
+}
+.faa-rising.animated.faa-slow,
+.faa-rising.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-rising.faa-slow {
+  animation: rising 3s linear infinite;
+}
+

src/font-awesome-animation.css

@@ -345,7 +345,6 @@
     50% {transform:translateY(0%); opacity:1}
     100% {transform:translateY(50%); opacity:0}
 }
-
 .faa-falling.animated,
 .faa-falling.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-falling {
@@ -361,3 +360,26 @@
 .faa-parent.animated-hover:hover > .faa-falling.faa-slow {
   animation: falling 3s linear infinite;
 }
+
+/* RISING */
+@keyframes rising {
+    0% {transform:translateY(50%); opacity:0}
+    50% {transform:translateY(0%); opacity:1}
+    100% {transform:translateY(-50%); opacity:0}
+}
+.faa-rising.animated,
+.faa-rising.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-rising {
+  animation: rising 2s linear infinite;
+}
+.faa-rising.animated.faa-fast,
+.faa-rising.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-rising.faa-fast {
+  animation: rising 1s linear infinite;
+}
+.faa-rising.animated.faa-slow,
+.faa-rising.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-rising.faa-slow {
+  animation: rising 3s linear infinite;
+}
+