refactor: optimize for import (#3)

* Change comment format to LESS comments

* Separate easings variables to independent file

* Add separated files including keyframes and animation names as mixins only

* Refactor modules to use keyframe imports and reference animation name mixins

* Split zoom keyframes to expand/shrink

* Import easing variables to individual keyframes files

* Move .animated rules to separate file as mixin, import to keyframe files

imports/_easing.less

@@ -0,0 +1,3 @@
+// custom easing imports
+@easeOutCirc: cubic-bezier(0, 0.590, 0.375, 1);
+@easeInCirc: cubic-bezier(0.590, 0, 1, 0.375);

imports/_mixins.less

@@ -0,0 +1,5 @@
+// mixins
+.animated() {
+	animation-duration: 0.3s;
+	animation-fill-mode: both;
+}

keyframes/basic-fade.keyframes.less

@@ -0,0 +1,30 @@
+@import (reference) './imports/_easing.less';
+@import (reference) './imports/_mixins.less';
+
+// Basic Fades
+@keyframes tdFadeIn {
+    0% { 
+        opacity: 0;
+    }
+
+    100% { 
+        opacity: 1;
+    }
+}
+
+@keyframes tdFadeOut {
+    0% { 
+        opacity: 1;
+    }
+
+    100% { 
+        opacity: 0;
+    }
+}
+
+.tdFadeIn() {
+    animation-name: tdFadeIn;
+}
+.tdFadeOut() {
+    animation-name: tdFadeOut;
+}

keyframes/drop.keyframes.less

@@ -0,0 +1,72 @@
+@import (reference) './imports/_easing.less';
+@import (reference) './imports/_mixins.less';
+
+// Drop In
+@keyframes tdDropInLeft {
+    0% {
+        opacity: 0;
+    }
+    1% { 
+        opacity: 1;
+        transform: rotate(2deg) translateY(-15px);
+        transform-origin: right bottom;
+        animation-timing-function: ease-in;
+    }
+
+    50% {
+        opacity: 1;
+        transform: rotate(0) translateY(0px);
+        transform-origin: right bottom;
+        animation-timing-function: ease-out;
+    }
+
+    75% {
+        transform: rotate(-0.5deg) translateY(0px);
+        transform-origin: left bottom;
+        animation-timing-function: @easeInCirc;
+    }
+    100% { 
+        opacity: 1;
+        transform: rotate(0) translateY(0px);
+        transform-origin: center bottom;
+        animation-timing-function: @easeOutCirc;
+    }
+}
+
+@keyframes tdDropInRight {
+    0% {
+        opacity: 0;
+    }
+    1% { 
+        opacity: 1;
+        transform: rotate(-2deg) translateY(-15px);
+        transform-origin: left bottom;
+        animation-timing-function: ease-in;
+    }
+
+    50% {
+        opacity: 1;
+        transform: rotate(0) translateY(0px);
+        transform-origin: left bottom;
+        animation-timing-function: ease-out;
+    }
+
+    75% {
+        transform: rotate(0.5deg) translateY(0px);
+        transform-origin: right bottom;
+        animation-timing-function: @easeInCirc;
+    }
+    100% { 
+        opacity: 1;
+        transform: rotate(0) translateY(0px);
+        transform-origin: center bottom;
+        animation-timing-function: @easeOutCirc;
+    }
+}
+
+.tdDropInLeft() {
+    animation-name: tdDropInLeft;
+}
+.tdDropInRight() {
+    animation-name: tdDropInRight;
+}

keyframes/fade.keyframes.less

@@ -0,0 +1,134 @@
+@import (reference) './imports/_easing.less';
+@import (reference) './imports/_mixins.less';
+
+// Fading Entrances
+@keyframes tdFadeInDown {
+    0% { 
+        opacity: 0;
+        transform: translateY(-10px);
+        animation-timing-function: @easeOutCirc;
+    }
+
+    100% { 
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes tdFadeInLeft {
+    0% { 
+        opacity: 0;
+        transform: translateX(10px);
+        animation-timing-function: @easeOutCirc;
+    }
+
+    100% { 
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes tdFadeInUp {
+    0% { 
+        opacity: 0;
+        transform: translateY(10px);
+        animation-timing-function: @easeOutCirc;
+    }
+
+    100% { 
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes tdFadeInRight {
+    0% { 
+        opacity: 0;
+        transform: translateX(-10px);
+        animation-timing-function: @easeOutCirc;
+    }
+
+    100% { 
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.tdFadeInDown() {
+    animation-name: tdFadeInDown;
+}
+.tdFadeInLeft() {
+    animation-name: tdFadeInLeft;
+}
+.tdFadeInUp() {
+    animation-name: tdFadeInUp;
+}
+.tdFadeInRight() {
+    animation-name: tdFadeInRight;
+}
+
+// Fading Exits
+@keyframes tdFadeOutUp {
+    0% { 
+        opacity: 1;
+        transform: translateY(0);
+        animation-timing-function: @easeOutCirc;
+    }
+
+    100% { 
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+}
+
+@keyframes tdFadeOutRight {
+    0% { 
+        opacity: 1;
+        transform: translateX(0);
+        animation-timing-function: @easeOutCirc;
+    }
+
+    100% { 
+        opacity: 0;
+        transform: translateX(10px);
+    }
+}
+
+@keyframes tdFadeOutDown {
+    0% { 
+        opacity: 1;
+        transform: translateY(0);
+        animation-timing-function: @easeOutCirc;
+    }
+
+    100% { 
+        opacity: 0;
+        transform: translateY(10px);
+    }
+}
+
+@keyframes tdFadeOutLeft {
+    0% { 
+        opacity: 1;
+        transform: translateX(0);
+        animation-timing-function: @easeOutCirc;
+    }
+
+    100% { 
+        opacity: 0;
+        transform: translateX(-10px);
+    }
+}
+
+.tdFadeOutUp() {
+    animation-name: tdFadeOutUp;
+}
+.tdFadeOutRight() {
+    animation-name: tdFadeOutRight;
+}
+.tdFadeOutDown() {
+    animation-name: tdFadeOutDown;
+}
+.tdFadeOutLeft() {
+    animation-name: tdFadeOutLeft;
+}

keyframes/hinge-flip.keyframes.less

@@ -0,0 +1,55 @@
+@import (reference) './imports/_easing.less';
+@import (reference) './imports/_mixins.less';
+
+// Hinge Flip
+@keyframes tdHingeFlipIn {
+    0% { 
+        opacity: 0;
+        transform: perspective(600px) rotateX(0deg);
+        transform-origin: center top;
+        animation-timing-function: @easeOutCirc;
+    }
+
+    50% {
+        transform: perspective(600px) rotateX(-10deg);
+        transform-origin: center top;
+        animation-timing-function: ease-in;
+    }
+
+    100% { 
+        opacity: 1;
+        transform: perspective(600px) rotateX(0deg);
+        transform-origin: center top;
+        animation-timing-function: ease-out;
+    }
+}
+
+.tdHingeFlipIn() {
+    animation-name: tdHingeFlipIn;
+}
+
+@keyframes tdHingeFlipOut {
+    0% { 
+        opacity: 1;
+        transform: perspective(600px) rotateX(0deg);
+        transform-origin: center top;
+        animation-timing-function: @easeOutCirc;
+    }
+
+    50% {
+        transform: perspective(600px) rotateX(-10deg);
+        transform-origin: center top;
+        animation-timing-function: ease-in;
+    }
+
+    100% { 
+        opacity: 0;
+        transform: perspective(600px) rotateX(0deg);
+        transform-origin: center top;
+        animation-timing-function: ease-out;
+    }
+}
+
+.tdHingeFlipOut() {
+    animation-name: tdHingeFlipOut;
+}

keyframes/plop.keyframes.less

@@ -0,0 +1,79 @@
+@import (reference) './imports/_easing.less';
+@import (reference) './imports/_mixins.less';
+
+// Plop Entrances
+@keyframes tdPlopIn {
+    0% { 
+        opacity: 0;
+        transform: scale(0.9,0.9);
+    }
+    10% {
+        opacity: 1;
+        transform: scale(0.7,1.3);
+    }
+    70% {
+        transform: scale(1.1,0.95);
+    }
+    90% {
+        transform: scale(0.97,1.05);
+    }
+    100% { 
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes tdPlopInDown {
+    0% { 
+        opacity: 0;
+        transform: scale(0.9,0.8);
+        transform-origin: center top;
+    }
+    10% {
+        opacity: 1;
+        transform: scale(0.8,1.3);
+        transform-origin: center top;
+    }
+    70% {
+        transform: scale(1,0.95);
+        transform-origin: center top;
+    }
+    100% { 
+        opacity: 1;
+        transform: scale(1);
+        transform-origin: center top;
+    }
+}
+
+@keyframes tdPlopInUp {
+    0% { 
+        opacity: 0;
+        transform: scale(0.9,0.8);
+        transform-origin: center bottom;
+    }
+    10% {
+        opacity: 1;
+        transform: scale(0.8,1.3);
+        transform-origin: center bottom;
+    }
+    70% {
+        transform: scale(1,0.95);
+        transform-origin: center bottom;
+    }
+    100% { 
+        opacity: 1;
+        transform: scale(1);
+        transform-origin: center bottom;
+    }
+}
+
+.tdPlopIn() {
+    animation-name: tdPlopIn;
+}
+.tdPlopInDown() {
+    animation-name: tdPlopInDown;
+}
+.tdPlopInUp() {
+    animation-name: tdPlopInUp;
+}
+