Split zoom keyframes to expand/shrink

shakrmedia · Jun 27, 2019 · b5cb692 · b5cb692
1 parent 229049b
commit b5cb692
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 78 deletions.
diff --git a/keyframes/zoom.expand.keyframes.less b/keyframes/zoom.expand.keyframes.less
@@ -0,0 +1,74 @@
+// Expand Entrances
+@keyframes tdExpandIn {
+    0% { 
+        opacity: 0;
+        transform: scale(0.85);
+        animation-timing-function: @easeOutCirc;
+    }
+
+    100% { 
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes tdExpandInBounce {
+    0% { 
+        opacity: 0;
+        transform: scale(0.85);
+        animation-timing-function: @easeOutCirc;
+    }
+    70% {
+        transform: scale(1.03);
+        animation-timing-function: ease;
+    }
+    100% { 
+        opacity: 1;
+        transform: scale(1);
+        animation-timing-function: ease;
+    }
+}
+
+.tdExpandIn() {
+    animation-name: tdExpandIn;
+}
+.tdExpandInBounce() {
+    animation-name: tdExpandInBounce;
+}
+
+// Expand Exits
+@keyframes tdExpandOut {
+    0% { 
+        opacity: 1;
+        transform: scale(1);
+        animation-timing-function: @easeOutCirc;
+    }
+    100% { 
+        opacity: 0;
+        transform: scale(1.2);
+    }
+}
+
+@keyframes tdExpandOutBounce {
+    0% { 
+        opacity: 1;
+        transform: scale(1);
+        animation-timing-function: @easeOutCirc;
+    }
+    30% {
+        opacity: 1;
+        transform: scale(0.95);
+        animation-timing-function: ease;
+    }
+    100% { 
+        opacity: 0;
+        transform: scale(1.2);
+    }
+}
+
+.tdExpandOut() {
+    animation-name: tdExpandOut;
+}
+.tdExpandOutBounce() {
+    animation-name: tdExpandOutBounce;
+}
diff --git a/keyframes/zoom.keyframes.less → keyframes/zoom.shrink.keyframes.less b/keyframes/zoom.keyframes.less → keyframes/zoom.shrink.keyframes.less
@@ -1,81 +1,3 @@
-// Expand Entrances
-@keyframes tdExpandIn {
-    0% { 
-        opacity: 0;
-        transform: scale(0.85);
-        animation-timing-function: @easeOutCirc;
-    }
-
-    100% { 
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-@keyframes tdExpandInBounce {
-    0% { 
-        opacity: 0;
-        transform: scale(0.85);
-        animation-timing-function: @easeOutCirc;
-    }
-    70% {
-        transform: scale(1.03);
-        animation-timing-function: ease;
-    }
-    100% { 
-        opacity: 1;
-        transform: scale(1);
-        animation-timing-function: ease;
-    }
-}
-
-.tdExpandIn() {
-    animation-name: tdExpandIn;
-}
-.tdExpandInBounce() {
-    animation-name: tdExpandInBounce;
-}
-
-// Expand Exits
-@keyframes tdExpandOut {
-    0% { 
-        opacity: 1;
-        transform: scale(1);
-        animation-timing-function: @easeOutCirc;
-    }
-    100% { 
-        opacity: 0;
-        transform: scale(1.2);
-    }
-}
-
-@keyframes tdExpandOutBounce {
-    0% { 
-        opacity: 1;
-        transform: scale(1);
-        animation-timing-function: @easeOutCirc;
-    }
-    30% {
-        opacity: 1;
-        transform: scale(0.95);
-        animation-timing-function: ease;
-    }
-    100% { 
-        opacity: 0;
-        transform: scale(1.2);
-    }
-}
-
-.tdExpandOut() {
-    animation-name: tdExpandOut;
-}
-.tdExpandOutBounce() {
-    animation-name: tdExpandOutBounce;
-}
-
-
-
-
 // Shrink Entrances
 @keyframes tdShrinkIn {
     0% {