refactor: switch node-sass from Myth + use SCSS instead to generate CSS

BREAKING CHANGE:

- `src` folder has become `scss`
- `dist` folder has become `css`

README.md

@@ -1,17 +1,26 @@
-# font-awesome-animation ![build](https://github.com/l-lin/font-awesome-animation/workflows/build/badge.svg) [![npm version](https://badge.fury.io/js/font-awesome-animation.svg)](https://badge.fury.io/js/font-awesome-animation)
+# font-awesome-animation 
 
 > Simple animations using some CSS3 I found on the web.
-> Best used on glyphicons like [FontAwesome](http://fortawesome.github.io/Font-Awesome/).
+> Best used on glyphicons like [FontAwesome][]
+
+![build](https://github.com/l-lin/font-awesome-animation/workflows/build/badge.svg)
+[![npm](https://img.shields.io/npm/v/font-awesome-animation.svg)][npm-link]
+[![npm](https://img.shields.io/npm/dm/font-awesome-animation.svg)][npm-link]
+[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/font-awesome-animation/badge?style=rounded)][cdn-link]
 
 ## Getting started
 
-Add
+Install from NPM:
 
 ```bash
 npm install font-awesome-animation
 ```
 
-Include CSS file in your index.html file: 
+Or with a CDN:
+
+[https://www.jsdelivr.com/package/npm/font-awesome-animation][cdn-link]
+
+Include CSS file in your index.html file:
 
 ```html
 <link rel="stylesheet" href="font-awesome-animation.min.css">
@@ -23,11 +32,6 @@ See [live demo](https://l-lin.github.com/font-awesome-animation).
 
 ## Development
 
-This project is using:
-
-- the CSS preprocessor [Myth](http://www.myth.io/) to generate the prefixes for common browsers
-
-
 ```bash
 # install dependencies
 npm install
@@ -40,3 +44,7 @@ npm run build
 
 [MIT License](LICENSE)
 
+[FontAwesome]: https://fontawesome.com/
+[npm-link]: https://www.npmjs.com/package/font-awesome-animation
+[cnd-link]: https://www.jsdelivr.com/package/npm/font-awesome-animation
+

css/font-awesome-animation.css

@@ -0,0 +1,898 @@
+/*! font-awesome-animation v0.4.2 | MIT License | https://github.com/l-lin/font-awesome-animation */
+/* WRENCHING */
+@-webkit-keyframes wrench {
+  0% {
+    transform: rotate(-12deg);
+  }
+  8% {
+    transform: rotate(12deg);
+  }
+  10% {
+    transform: rotate(24deg);
+  }
+  18% {
+    transform: rotate(-24deg);
+  }
+  20% {
+    transform: rotate(-24deg);
+  }
+  28% {
+    transform: rotate(24deg);
+  }
+  30% {
+    transform: rotate(24deg);
+  }
+  38% {
+    transform: rotate(-24deg);
+  }
+  40% {
+    transform: rotate(-24deg);
+  }
+  48% {
+    transform: rotate(24deg);
+  }
+  50% {
+    transform: rotate(24deg);
+  }
+  58% {
+    transform: rotate(-24deg);
+  }
+  60% {
+    transform: rotate(-24deg);
+  }
+  68% {
+    transform: rotate(24deg);
+  }
+  75%, 100% {
+    transform: rotate(0deg);
+  }
+}
+@keyframes wrench {
+  0% {
+    transform: rotate(-12deg);
+  }
+  8% {
+    transform: rotate(12deg);
+  }
+  10% {
+    transform: rotate(24deg);
+  }
+  18% {
+    transform: rotate(-24deg);
+  }
+  20% {
+    transform: rotate(-24deg);
+  }
+  28% {
+    transform: rotate(24deg);
+  }
+  30% {
+    transform: rotate(24deg);
+  }
+  38% {
+    transform: rotate(-24deg);
+  }
+  40% {
+    transform: rotate(-24deg);
+  }
+  48% {
+    transform: rotate(24deg);
+  }
+  50% {
+    transform: rotate(24deg);
+  }
+  58% {
+    transform: rotate(-24deg);
+  }
+  60% {
+    transform: rotate(-24deg);
+  }
+  68% {
+    transform: rotate(24deg);
+  }
+  75%, 100% {
+    transform: rotate(0deg);
+  }
+}
+
+.faa-wrench.animated,
+.faa-wrench.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-wrench {
+  -webkit-animation: wrench 2.5s ease infinite;
+          animation: wrench 2.5s ease infinite;
+  transform-origin-x: 90%;
+  transform-origin-y: 35%;
+  transform-origin-z: initial;
+}
+
+.faa-wrench.animated.faa-fast,
+.faa-wrench.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-wrench.faa-fast {
+  -webkit-animation: wrench 1.2s ease infinite;
+          animation: wrench 1.2s ease infinite;
+}
+
+.faa-wrench.animated.faa-slow,
+.faa-wrench.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-wrench.faa-slow {
+  -webkit-animation: wrench 3.7s ease infinite;
+          animation: wrench 3.7s ease infinite;
+}
+
+/* BELL */
+@-webkit-keyframes ring {
+  0% {
+    transform: rotate(-15deg);
+  }
+  2% {
+    transform: rotate(15deg);
+  }
+  4% {
+    transform: rotate(-18deg);
+  }
+  6% {
+    transform: rotate(18deg);
+  }
+  8% {
+    transform: rotate(-22deg);
+  }
+  10% {
+    transform: rotate(22deg);
+  }
+  12% {
+    transform: rotate(-18deg);
+  }
+  14% {
+    transform: rotate(18deg);
+  }
+  16% {
+    transform: rotate(-12deg);
+  }
+  18% {
+    transform: rotate(12deg);
+  }
+  20%, 100% {
+    transform: rotate(0deg);
+  }
+}
+@keyframes ring {
+  0% {
+    transform: rotate(-15deg);
+  }
+  2% {
+    transform: rotate(15deg);
+  }
+  4% {
+    transform: rotate(-18deg);
+  }
+  6% {
+    transform: rotate(18deg);
+  }
+  8% {
+    transform: rotate(-22deg);
+  }
+  10% {
+    transform: rotate(22deg);
+  }
+  12% {
+    transform: rotate(-18deg);
+  }
+  14% {
+    transform: rotate(18deg);
+  }
+  16% {
+    transform: rotate(-12deg);
+  }
+  18% {
+    transform: rotate(12deg);
+  }
+  20%, 100% {
+    transform: rotate(0deg);
+  }
+}
+
+.faa-ring.animated,
+.faa-ring.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-ring {
+  -webkit-animation: ring 2s ease infinite;
+          animation: ring 2s ease infinite;
+  transform-origin-x: 50%;
+  transform-origin-y: 0px;
+  transform-origin-z: initial;
+}
+
+.faa-ring.animated.faa-fast,
+.faa-ring.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-ring.faa-fast {
+  -webkit-animation: ring 1s ease infinite;
+          animation: ring 1s ease infinite;
+}
+
+.faa-ring.animated.faa-slow,
+.faa-ring.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-ring.faa-slow {
+  -webkit-animation: ring 3s ease infinite;
+          animation: ring 3s ease infinite;
+}
+
+/* VERTICAL */
+@-webkit-keyframes vertical {
+  0% {
+    transform: translate(0, -3px);
+  }
+  4% {
+    transform: translate(0, 3px);
+  }
+  8% {
+    transform: translate(0, -3px);
+  }
+  12% {
+    transform: translate(0, 3px);
+  }
+  16% {
+    transform: translate(0, -3px);
+  }
+  20% {
+    transform: translate(0, 3px);
+  }
+  22%, 100% {
+    transform: translate(0, 0);
+  }
+}
+@keyframes vertical {
+  0% {
+    transform: translate(0, -3px);
+  }
+  4% {
+    transform: translate(0, 3px);
+  }
+  8% {
+    transform: translate(0, -3px);
+  }
+  12% {
+    transform: translate(0, 3px);
+  }
+  16% {
+    transform: translate(0, -3px);
+  }
+  20% {
+    transform: translate(0, 3px);
+  }
+  22%, 100% {
+    transform: translate(0, 0);
+  }
+}
+
+.faa-vertical.animated,
+.faa-vertical.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-vertical {
+  -webkit-animation: vertical 2s ease infinite;
+          animation: vertical 2s ease infinite;
+}
+
+.faa-vertical.animated.faa-fast,
+.faa-vertical.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-vertical.faa-fast {
+  -webkit-animation: vertical 1s ease infinite;
+          animation: vertical 1s ease infinite;
+}
+
+.faa-vertical.animated.faa-slow,
+.faa-vertical.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-vertical.faa-slow {
+  -webkit-animation: vertical 4s ease infinite;
+          animation: vertical 4s ease infinite;
+}
+
+/* HORIZONTAL */
+@-webkit-keyframes horizontal {
+  0% {
+    transform: translate(0, 0);
+  }
+  6% {
+    transform: translate(5px, 0);
+  }
+  12% {
+    transform: translate(0, 0);
+  }
+  18% {
+    transform: translate(5px, 0);
+  }
+  24% {
+    transform: translate(0, 0);
+  }
+  30% {
+    transform: translate(5px, 0);
+  }
+  36%, 100% {
+    transform: translate(0, 0);
+  }
+}
+@keyframes horizontal {
+  0% {
+    transform: translate(0, 0);
+  }
+  6% {
+    transform: translate(5px, 0);
+  }
+  12% {
+    transform: translate(0, 0);
+  }
+  18% {
+    transform: translate(5px, 0);
+  }
+  24% {
+    transform: translate(0, 0);
+  }
+  30% {
+    transform: translate(5px, 0);
+  }
+  36%, 100% {
+    transform: translate(0, 0);
+  }
+}
+
+.faa-horizontal.animated,
+.faa-horizontal.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-horizontal {
+  -webkit-animation: horizontal 2s ease infinite;
+          animation: horizontal 2s ease infinite;
+}
+
+.faa-horizontal.animated.faa-fast,
+.faa-horizontal.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-horizontal.faa-fast {
+  -webkit-animation: horizontal 1s ease infinite;
+          animation: horizontal 1s ease infinite;
+}
+
+.faa-horizontal.animated.faa-slow,
+.faa-horizontal.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-horizontal.faa-slow {
+  -webkit-animation: horizontal 3s ease infinite;
+          animation: horizontal 3s ease infinite;
+}
+
+/* FLASHING */
+@-webkit-keyframes flash {
+  0%, 100%, 50% {
+    opacity: 1;
+  }
+  25%, 75% {
+    opacity: 0;
+  }
+}
+@keyframes flash {
+  0%, 100%, 50% {
+    opacity: 1;
+  }
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+.faa-flash.animated,
+.faa-flash.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-flash {
+  -webkit-animation: flash 2s ease infinite;
+          animation: flash 2s ease infinite;
+}
+
+.faa-flash.animated.faa-fast,
+.faa-flash.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-flash.faa-fast {
+  -webkit-animation: flash 1s ease infinite;
+          animation: flash 1s ease infinite;
+}
+
+.faa-flash.animated.faa-slow,
+.faa-flash.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-flash.faa-slow {
+  -webkit-animation: flash 3s ease infinite;
+          animation: flash 3s ease infinite;
+}
+
+/* BOUNCE */
+@-webkit-keyframes bounce {
+  0%, 10%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-15px);
+  }
+  60% {
+    transform: translateY(-15px);
+  }
+}
+@keyframes bounce {
+  0%, 10%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-15px);
+  }
+  60% {
+    transform: translateY(-15px);
+  }
+}
+
+.faa-bounce.animated,
+.faa-bounce.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-bounce {
+  -webkit-animation: bounce 2s ease infinite;
+          animation: bounce 2s ease infinite;
+}
+
+.faa-bounce.animated.faa-fast,
+.faa-bounce.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-bounce.faa-fast {
+  -webkit-animation: bounce 1s ease infinite;
+          animation: bounce 1s ease infinite;
+}
+
+.faa-bounce.animated.faa-slow,
+.faa-bounce.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-bounce.faa-slow {
+  -webkit-animation: bounce 3s ease infinite;
+          animation: bounce 3s ease infinite;
+}
+
+/* SPIN */
+@-webkit-keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
+
+.faa-spin.animated,
+.faa-spin.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-spin {
+  -webkit-animation: spin 1.5s linear infinite;
+          animation: spin 1.5s linear infinite;
+}
+
+.faa-spin.animated.faa-fast,
+.faa-spin.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-spin.faa-fast {
+  -webkit-animation: spin 0.7s linear infinite;
+          animation: spin 0.7s linear infinite;
+}
+
+.faa-spin.animated.faa-slow,
+.faa-spin.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-spin.faa-slow {
+  -webkit-animation: spin 2.2s linear infinite;
+          animation: spin 2.2s linear infinite;
+}
+
+/* FLOAT */
+@-webkit-keyframes float {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes float {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.faa-float.animated,
+.faa-float.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-float {
+  -webkit-animation: float 2s linear infinite;
+          animation: float 2s linear infinite;
+}
+
+.faa-float.animated.faa-fast,
+.faa-float.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-float.faa-fast {
+  -webkit-animation: float 1s linear infinite;
+          animation: float 1s linear infinite;
+}
+
+.faa-float.animated.faa-slow,
+.faa-float.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-float.faa-slow {
+  -webkit-animation: float 3s linear infinite;
+          animation: float 3s linear infinite;
+}
+
+/* PULSE */
+@-webkit-keyframes pulse {
+  0% {
+    transform: scale(1.1);
+  }
+  50% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1.1);
+  }
+}
+@keyframes pulse {
+  0% {
+    transform: scale(1.1);
+  }
+  50% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1.1);
+  }
+}
+
+.faa-pulse.animated,
+.faa-pulse.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-pulse {
+  -webkit-animation: pulse 2s linear infinite;
+          animation: pulse 2s linear infinite;
+}
+
+.faa-pulse.animated.faa-fast,
+.faa-pulse.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-pulse.faa-fast {
+  -webkit-animation: pulse 1s linear infinite;
+          animation: pulse 1s linear infinite;
+}
+
+.faa-pulse.animated.faa-slow,
+.faa-pulse.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-pulse.faa-slow {
+  -webkit-animation: pulse 3s linear infinite;
+          animation: pulse 3s linear infinite;
+}
+
+/* SHAKE */
+.faa-shake.animated,
+.faa-shake.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-shake {
+  -webkit-animation: wrench 2.5s ease infinite;
+          animation: wrench 2.5s ease infinite;
+}
+
+.faa-shake.animated.faa-fast,
+.faa-shake.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-shake.faa-fast {
+  -webkit-animation: wrench 1.2s ease infinite;
+          animation: wrench 1.2s ease infinite;
+}
+
+.faa-shake.animated.faa-slow,
+.faa-shake.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-shake.faa-slow {
+  -webkit-animation: wrench 3.7s ease infinite;
+          animation: wrench 3.7s ease infinite;
+}
+
+/* TADA */
+@-webkit-keyframes tada {
+  0% {
+    transform: scale(1);
+  }
+  10%, 20% {
+    transform: scale(0.9) rotate(-8deg);
+  }
+  30%, 50%, 70% {
+    transform: scale(1.3) rotate(8deg);
+  }
+  40%, 60% {
+    transform: scale(1.3) rotate(-8deg);
+  }
+  80%, 100% {
+    transform: scale(1) rotate(0);
+  }
+}
+@keyframes tada {
+  0% {
+    transform: scale(1);
+  }
+  10%, 20% {
+    transform: scale(0.9) rotate(-8deg);
+  }
+  30%, 50%, 70% {
+    transform: scale(1.3) rotate(8deg);
+  }
+  40%, 60% {
+    transform: scale(1.3) rotate(-8deg);
+  }
+  80%, 100% {
+    transform: scale(1) rotate(0);
+  }
+}
+
+.faa-tada.animated,
+.faa-tada.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-tada {
+  -webkit-animation: tada 2s linear infinite;
+          animation: tada 2s linear infinite;
+}
+
+.faa-tada.animated.faa-fast,
+.faa-tada.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-tada.faa-fast {
+  -webkit-animation: tada 1s linear infinite;
+          animation: tada 1s linear infinite;
+}
+
+.faa-tada.animated.faa-slow,
+.faa-tada.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-tada.faa-slow {
+  -webkit-animation: tada 3s linear infinite;
+          animation: tada 3s linear infinite;
+}
+
+/* PASSING */
+@-webkit-keyframes passing {
+  0% {
+    transform: translateX(-50%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(50%);
+    opacity: 0;
+  }
+}
+@keyframes passing {
+  0% {
+    transform: translateX(-50%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(50%);
+    opacity: 0;
+  }
+}
+
+.faa-passing.animated,
+.faa-passing.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-passing {
+  -webkit-animation: passing 2s linear infinite;
+          animation: passing 2s linear infinite;
+}
+
+.faa-passing.animated.faa-fast,
+.faa-passing.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-passing.faa-fast {
+  -webkit-animation: passing 1s linear infinite;
+          animation: passing 1s linear infinite;
+}
+
+.faa-passing.animated.faa-slow,
+.faa-passing.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-passing.faa-slow {
+  -webkit-animation: passing 3s linear infinite;
+          animation: passing 3s linear infinite;
+}
+
+/* PASSING REVERSE */
+@-webkit-keyframes passing-reverse {
+  0% {
+    transform: translateX(50%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(-50%);
+    opacity: 0;
+  }
+}
+@keyframes passing-reverse {
+  0% {
+    transform: translateX(50%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(-50%);
+    opacity: 0;
+  }
+}
+
+.faa-passing-reverse.animated,
+.faa-passing-reverse.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-passing-reverse {
+  -webkit-animation: passing-reverse 2s linear infinite;
+          animation: passing-reverse 2s linear infinite;
+}
+
+.faa-passing-reverse.animated.faa-fast,
+.faa-passing-reverse.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-fast {
+  -webkit-animation: passing-reverse 1s linear infinite;
+          animation: passing-reverse 1s linear infinite;
+}
+
+.faa-passing-reverse.animated.faa-slow,
+.faa-passing-reverse.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-slow {
+  -webkit-animation: passing-reverse 3s linear infinite;
+          animation: passing-reverse 3s linear infinite;
+}
+
+/* BURST */
+@-webkit-keyframes burst {
+  0% {
+    opacity: .6;
+  }
+  50% {
+    transform: scale(1.8);
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes burst {
+  0% {
+    opacity: .6;
+  }
+  50% {
+    transform: scale(1.8);
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.faa-burst.animated,
+.faa-burst.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-burst {
+  -webkit-animation: burst 2s infinite linear;
+          animation: burst 2s infinite linear;
+}
+
+.faa-burst.animated.faa-fast,
+.faa-burst.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-burst.faa-fast {
+  -webkit-animation: burst 1s infinite linear;
+          animation: burst 1s infinite linear;
+}
+
+.faa-burst.animated.faa-slow,
+.faa-burst.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-burst.faa-slow {
+  -webkit-animation: burst 3s infinite linear;
+          animation: burst 3s infinite linear;
+}
+
+/* FALLING */
+@-webkit-keyframes falling {
+  0% {
+    transform: translateY(-50%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(50%);
+    opacity: 0;
+  }
+}
+@keyframes falling {
+  0% {
+    transform: translateY(-50%);
+    opacity: 0;
+  }
+  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 {
+  -webkit-animation: falling 2s linear infinite;
+          animation: falling 2s linear infinite;
+}
+
+.faa-falling.animated.faa-fast,
+.faa-falling.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-falling.faa-fast {
+  -webkit-animation: falling 1s linear infinite;
+          animation: falling 1s linear infinite;
+}
+
+.faa-falling.animated.faa-slow,
+.faa-falling.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-falling.faa-slow {
+  -webkit-animation: falling 3s linear infinite;
+          animation: falling 3s linear infinite;
+}
+
+/* RISING */
+@-webkit-keyframes rising {
+  0% {
+    transform: translateY(50%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-50%);
+    opacity: 0;
+  }
+}
+@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 {
+  -webkit-animation: rising 2s linear infinite;
+          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 {
+  -webkit-animation: rising 1s linear infinite;
+          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 {
+  -webkit-animation: rising 3s linear infinite;
+          animation: rising 3s linear infinite;
+}
+/*# sourceMappingURL=font-awesome-animation.css.map */

package.json

@@ -4,6 +4,7 @@
   "dependencies": {},
   "author": "l-lin",
   "license": "MIT",
+  "main": "sass/$npm_package_name.sass",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/l-lin/font-awesome-animation.git"
@@ -13,27 +14,31 @@
   },
   "homepage": "https://l-lin.github.io/font-awesome-animation",
   "devDependencies": {
+    "autoprefixer": "~10.2.3",
+    "clean-css-cli": "~4.3.0",
     "concat": "~1.0.3",
     "handlebars": "~4.7.6",
-    "myth6": "~1.5.0",
+    "node-sass": "~5.0.0",
+    "postcss": "^8.1.0",
+    "postcss-cli": "~8.3.1",
     "rimraf": "~3.0.2"
   },
   "engines": {
     "node": ">=12.0.0"
   },
   "scripts": {
-    "build": "npm run clean && npm run init:folders && npm run transform && npm run transform:compress && npm run generate:banner && npm run concat:banner",
+    "build": "npm run clean && npm run build:sass && npm run build:autoprefixer && npm run build:cleancss && npm run generate:banner && npm run concat:banner",
-    "clean": "rimraf -f build dist",
+    "build:autoprefixer": "postcss --use autoprefixer  --map false --output css/$npm_package_name.css css/$npm_package_name.css",
-    "concat:banner": "concat build/banner.css build/$npm_package_name.css -o dist/$npm_package_name.css && concat build/banner.css build/$npm_package_name.min.css -o dist/$npm_package_name.min.css",
+    "build:cleancss": "cleancss -o css/$npm_package_name.min.css css/$npm_package_name.css",
-    "generate:banner": "node scripts/generate_banner.js build/banner.css",
+    "build:sass": "node-sass --output-style expanded --source-map true scss/font-awesome-animation.scss css/font-awesome-animation.css",
-    "init:folders": "mkdir -p build && mkdir -p dist",
+    "clean": "rimraf -f build css",
-    "transform": "myth src/font-awesome-animation.css build/$npm_package_name.css --sourcemap",
+    "concat:banner": "concat build/banner.css css/$npm_package_name.css -o css/$npm_package_name.css && concat build/banner.css css/$npm_package_name.min.css -o css/$npm_package_name.min.css",
-    "transform:compress": "myth src/font-awesome-animation.css build/$npm_package_name.min.css --sourcemap --compress",
+    "generate:banner": "mkdir -p build && node scripts/generate_banner.js build/banner.css",
     "version": "npm run build",
     "postversion": "git push && git push --tags"
   },
   "files": [
     "css",
-    "sass"
+    "scss"
   ]
 }

scripts/generate_banner.js

@@ -2,11 +2,7 @@ const Handlebars = require('handlebars');
 const fs = require('fs');
 const pjson = require('../package.json');
 
-const template = Handlebars.compile('/*!\n' +
+const template = Handlebars.compile('/*! {{ name }} v{{ version }} | MIT License | https://github.com/{{ author }}/{{ name }} */');
-  ' * {{ name }} - v{{ version }}\n' +
-  ' * https://github.com/{{ author }}/{{ name }}\n' +
-  ' * License: MIT\n' +
-  ' */');
 
 const result = template(pjson);
 

src/font-awesome-animation.css

@@ -1,385 +0,0 @@
-/* WRENCHING */
-@keyframes wrench {
-  0%{transform:rotate(-12deg)}
-  8%{transform:rotate(12deg)}
-  10%{transform:rotate(24deg)}
-  18%{transform:rotate(-24deg)}
-  20%{transform:rotate(-24deg)}
-  28%{transform:rotate(24deg)}
-  30%{transform:rotate(24deg)}
-  38%{transform:rotate(-24deg)}
-  40%{transform:rotate(-24deg)}
-  48%{transform:rotate(24deg)}
-  50%{transform:rotate(24deg)}
-  58%{transform:rotate(-24deg)}
-  60%{transform:rotate(-24deg)}
-  68%{transform:rotate(24deg)}
-  75%,100%{transform:rotate(0deg)}
-}
-.faa-wrench.animated,
-.faa-wrench.animated-hover:hover,
-.faa-parent.animated-hover:hover > .faa-wrench {
-  animation: wrench 2.5s ease infinite;
-  transform-origin-x: 90%;
-  transform-origin-y: 35%;
-  transform-origin-z: initial;
-}
-.faa-wrench.animated.faa-fast,
-.faa-wrench.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-wrench.faa-fast {
-  animation: wrench 1.2s ease infinite;
-}
-.faa-wrench.animated.faa-slow,
-.faa-wrench.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-wrench.faa-slow {
-  animation: wrench 3.7s ease infinite;
-}
-
-/* BELL */
-@keyframes ring {
-  0%{transform:rotate(-15deg)}
-  2%{transform:rotate(15deg)}
-  4%{transform:rotate(-18deg)}
-  6%{transform:rotate(18deg)}
-  8%{transform:rotate(-22deg)}
-  10%{transform:rotate(22deg)}
-  12%{transform:rotate(-18deg)}
-  14%{transform:rotate(18deg)}
-  16%{transform:rotate(-12deg)}
-  18%{transform:rotate(12deg)}
-  20%,100%{transform:rotate(0deg)}
-}
-.faa-ring.animated,
-.faa-ring.animated-hover:hover,
-.faa-parent.animated-hover:hover > .faa-ring {
-  animation: ring 2s ease infinite;
-  transform-origin-x: 50%;
-  transform-origin-y: 0px;
-  transform-origin-z: initial;
-}
-.faa-ring.animated.faa-fast,
-.faa-ring.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-ring.faa-fast {
-  animation: ring 1s ease infinite;
-}
-.faa-ring.animated.faa-slow,
-.faa-ring.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-ring.faa-slow {
-  animation: ring 3s ease infinite;
-}
-
-/* VERTICAL */
-@keyframes vertical {
-  0%{transform:translate(0,-3px)}
-  4%{transform:translate(0,3px)}
-  8%{transform:translate(0,-3px)}
-  12%{transform:translate(0,3px)}
-  16%{transform:translate(0,-3px)}
-  20%{transform:translate(0,3px)}
-  22%,100%{transform:translate(0,0)}
-}
-.faa-vertical.animated,
-.faa-vertical.animated-hover:hover,
-.faa-parent.animated-hover:hover > .faa-vertical {
-  animation: vertical 2s ease infinite;
-}
-.faa-vertical.animated.faa-fast,
-.faa-vertical.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-vertical.faa-fast {
-  animation: vertical 1s ease infinite;
-}
-.faa-vertical.animated.faa-slow,
-.faa-vertical.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-vertical.faa-slow {
-  animation: vertical 4s ease infinite;
-}
-
-/* HORIZONTAL */
-@keyframes horizontal {
-  0%{transform:translate(0,0)}
-  6%{transform:translate(5px,0)}
-  12%{transform:translate(0,0)}
-  18%{transform:translate(5px,0)}
-  24%{transform:translate(0,0)}
-  30%{transform:translate(5px,0)}
-  36%,100%{transform:translate(0,0)}
-}
-.faa-horizontal.animated,
-.faa-horizontal.animated-hover:hover,
-.faa-parent.animated-hover:hover > .faa-horizontal {
-  animation: horizontal 2s ease infinite;
-}
-.faa-horizontal.animated.faa-fast,
-.faa-horizontal.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-horizontal.faa-fast {
-  animation: horizontal 1s ease infinite;
-}
-.faa-horizontal.animated.faa-slow,
-.faa-horizontal.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-horizontal.faa-slow {
-  animation: horizontal 3s ease infinite;
-}
-
-/* FLASHING */
-@keyframes flash {
-  0%,100%,50%{opacity:1}
-  25%,75%{opacity:0}
-}
-.faa-flash.animated,
-.faa-flash.animated-hover:hover,
-.faa-parent.animated-hover:hover > .faa-flash {
-  animation: flash 2s ease infinite;
-}
-.faa-flash.animated.faa-fast,
-.faa-flash.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-flash.faa-fast {
-  animation: flash 1s ease infinite;
-}
-.faa-flash.animated.faa-slow,
-.faa-flash.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-flash.faa-slow {
-  animation: flash 3s ease infinite;
-}
-
-/* BOUNCE */
-@keyframes bounce {
-  0%,10%,20%,50%,80%,100%{transform:translateY(0)}
-  40%{transform:translateY(-15px)}
-  60%{transform:translateY(-15px)}
-}
-.faa-bounce.animated,
-.faa-bounce.animated-hover:hover,
-.faa-parent.animated-hover:hover > .faa-bounce {
-  animation: bounce 2s ease infinite;
-}
-.faa-bounce.animated.faa-fast,
-.faa-bounce.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-bounce.faa-fast {
-  animation: bounce 1s ease infinite;
-}
-.faa-bounce.animated.faa-slow,
-.faa-bounce.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-bounce.faa-slow {
-  animation: bounce 3s ease infinite;
-}
-
-/* SPIN */
-@keyframes spin{
-  0%{transform:rotate(0deg)}
-  100%{transform:rotate(359deg)}
-}
-.faa-spin.animated,
-.faa-spin.animated-hover:hover,
-.faa-parent.animated-hover:hover > .faa-spin {
-  animation: spin 1.5s linear infinite;
-}
-.faa-spin.animated.faa-fast,
-.faa-spin.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-spin.faa-fast {
-  animation: spin 0.7s linear infinite;
-}
-.faa-spin.animated.faa-slow,
-.faa-spin.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-spin.faa-slow {
-  animation: spin 2.2s linear infinite;
-}
-
-/* FLOAT */
-@keyframes float{
-  0%{transform: translateY(0)}
-  50%{transform: translateY(-6px)}
-  100%{transform: translateY(0)}
-}
-.faa-float.animated,
-.faa-float.animated-hover:hover,
-.faa-parent.animated-hover:hover > .faa-float {
-  animation: float 2s linear infinite;
-}
-.faa-float.animated.faa-fast,
-.faa-float.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-float.faa-fast {
-  animation: float 1s linear infinite;
-}
-.faa-float.animated.faa-slow,
-.faa-float.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-float.faa-slow {
-  animation: float 3s linear infinite;
-}
-
-/* PULSE */
-@keyframes pulse {
-  0% {transform: scale(1.1)}
-   50% {transform: scale(0.8)}
-   100% {transform: scale(1.1)}
-}
-.faa-pulse.animated,
-.faa-pulse.animated-hover:hover,
-.faa-parent.animated-hover:hover > .faa-pulse {
-  animation: pulse 2s linear infinite;
-}
-.faa-pulse.animated.faa-fast,
-.faa-pulse.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-pulse.faa-fast {
-  animation: pulse 1s linear infinite;
-}
-.faa-pulse.animated.faa-slow,
-.faa-pulse.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-pulse.faa-slow {
-  animation: pulse 3s linear infinite;
-}
-
-/* SHAKE */
-.faa-shake.animated,
-.faa-shake.animated-hover:hover,
-.faa-parent.animated-hover:hover > .faa-shake {
-  animation: wrench 2.5s ease infinite;
-}
-.faa-shake.animated.faa-fast,
-.faa-shake.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-shake.faa-fast {
-  animation: wrench 1.2s ease infinite;
-}
-.faa-shake.animated.faa-slow,
-.faa-shake.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-shake.faa-slow {
-  animation: wrench 3.7s ease infinite;
-}
-
-/* TADA */
-@keyframes tada {
-  0% {transform: scale(1)}
-  10%,20% {transform:scale(.9) rotate(-8deg);}
-  30%,50%,70% {transform:scale(1.3) rotate(8deg)}
-  40%,60% {transform:scale(1.3) rotate(-8deg)}
-  80%,100% {transform:scale(1) rotate(0)}
-}
-
-.faa-tada.animated,
-.faa-tada.animated-hover:hover,
-.faa-parent.animated-hover:hover > .faa-tada {
-  animation: tada 2s linear infinite;
-}
-.faa-tada.animated.faa-fast,
-.faa-tada.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-tada.faa-fast {
-  animation: tada 1s linear infinite;
-}
-.faa-tada.animated.faa-slow,
-.faa-tada.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-tada.faa-slow {
-  animation: tada 3s linear infinite;
-}
-
-/* PASSING */
-@keyframes passing {
-  0% {transform:translateX(-50%); opacity:0}
-  50% {transform:translateX(0%); opacity:1}
-  100% {transform:translateX(50%); opacity:0}
-}
-
-.faa-passing.animated,
-.faa-passing.animated-hover:hover,
-.faa-parent.animated-hover:hover > .faa-passing {
-  animation: passing 2s linear infinite;
-}
-.faa-passing.animated.faa-fast,
-.faa-passing.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-passing.faa-fast {
-  animation: passing 1s linear infinite;
-}
-.faa-passing.animated.faa-slow,
-.faa-passing.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-passing.faa-slow {
-  animation: passing 3s linear infinite;
-}
-
-/* PASSING REVERSE */
-
-@keyframes passing-reverse {
-  0% {transform:translateX(50%); opacity:0}
-  50% {transform:translateX(0%); opacity:1}
-  100% {transform:translateX(-50%); opacity:0}
-}
-
-.faa-passing-reverse.animated,
-.faa-passing-reverse.animated-hover:hover,
-.faa-parent.animated-hover:hover > .faa-passing-reverse {
-  animation: passing-reverse 2s linear infinite;
-}
-.faa-passing-reverse.animated.faa-fast,
-.faa-passing-reverse.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-fast {
-  animation: passing-reverse 1s linear infinite;
-}
-.faa-passing-reverse.animated.faa-slow,
-.faa-passing-reverse.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-slow {
-  animation: passing-reverse 3s linear infinite;
-}
-
-/* BURST */
-@keyframes burst {
-  0% {opacity:.6}
-  50% {transform:scale(1.8);opacity:0}
-  100%{opacity:0}
-}
-.faa-burst.animated,
-.faa-burst.animated-hover:hover,
-.faa-parent.animated-hover:hover > .faa-burst {
-  animation: burst 2s infinite linear
-}
-.faa-burst.animated.faa-fast,
-.faa-burst.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-burst.faa-fast {
-  animation: burst 1s infinite linear
-}
-.faa-burst.animated.faa-slow,
-.faa-burst.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-burst.faa-slow {
-  animation: burst 3s infinite linear
-}
-
-/* FALLING */
-@keyframes falling {
-    0% {transform:translateY(-50%); opacity:0}
-    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 {
-  animation: falling 2s linear infinite;
-}
-.faa-falling.animated.faa-fast,
-.faa-falling.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-falling.faa-fast {
-  animation: falling 1s linear infinite;
-}
-.faa-falling.animated.faa-slow,
-.faa-falling.animated-hover.faa-slow:hover,
-.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;
-}
-