make all keyframe usage uniform

client/src/common.scss

@@ -0,0 +1,25 @@
+@mixin keyframes($animation-name) {
+  @-webkit-keyframes #{$animation-name} {
+    @content;
+  }
+  @-moz-keyframes #{$animation-name} {
+    @content;
+  }  
+  @-ms-keyframes #{$animation-name} {
+    @content;
+  }
+  @-o-keyframes #{$animation-name} {
+    @content;
+  }  
+  @keyframes #{$animation-name} {
+    @content;
+  }
+}
+
+@mixin animation($str) {
+  -webkit-animation: #{$str};
+  -moz-animation: #{$str};
+  -ms-animation: #{$str};
+  -o-animation: #{$str};
+  animation: #{$str};      
+}

client/src/components/cover/cover.scss

@@ -1,3 +1,5 @@
+@import "../../common.scss";
+
 #cover:before {
     content: "";
     position: absolute;
@@ -7,7 +9,7 @@
     left: -50%;
     z-index: -1;
     background: url('./backscreen.png');
-    animation-name: bkimage;
+    @include animation('bkimage');
     animation-duration: 33s;
     animation-timing-function: linear;
     animation-iteration-count: 1;
@@ -83,7 +85,7 @@
   }
 
 
-  @keyframes bkimage {
+  @include keyframes(bkimage) {
     0%{
        transform: translateY(350px);
     }

client/src/components/imagebuild/imagebuild.scss

@@ -1,3 +1,5 @@
+@import "../../common.scss";
+
 #mainframe{
     /*border: 3px solid black;*/
     margin-top: 5px;
@@ -98,7 +100,7 @@
     background: #676b71;
     border-radius: 100%;
     margin: auto;
-    animation-name: bubbleanimate;
+    @include animation('bubbleanimate');
     animation-duration: 1s;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
@@ -120,15 +122,16 @@
 }
 }
 
-@keyframes bubbleanimate{
+.my-gallery-class{
+  margin: 0 auto;
+}
+
+
+@include keyframes(bubbleanimate){
   0%{
     transform: scale(0.2)
   }
   100%{
     transform: scale(1)
   }
-}
-
-.my-gallery-class{
-  margin: 0 auto;
 }

client/src/components/menu/menu.scss

@@ -1,3 +1,4 @@
+@import "../../common.scss";  
   .menu{
     position: fixed;
     display: flex;
@@ -76,14 +77,14 @@
     background: #f8f8f8;
     &.drop{
       top: 50px;
-      animation-name: dropmenu;
+      @include animation('dropmenu');
       animation-duration: 1s;
       animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
       animation-iteration-count: 1;
     }
     &.lift{
       top: -350px;
-      animation-name: liftmenu;
+      @include animation('liftmenu');
       animation-duration: .75s;
       animation-timing-function: ease-out;
       animation-iteration-count: 1;
@@ -105,7 +106,7 @@
     }
   }
 
-  @keyframes dropmenu {
+  @include keyframes(dropmenu) {
     0%{
       opacity: 0;
       top: -350;
@@ -116,7 +117,7 @@
     }
   }
 
-  @keyframes liftmenu {
+  @include keyframes(liftmenu) {
     0%{
       opacity: 1;
       top: 50;

client/src/components/modal/modal.scss

@@ -1,28 +1,4 @@
-@mixin keyframes($animation-name) {
-  @-webkit-keyframes #{$animation-name} {
-    @content;
-  }
-  @-moz-keyframes #{$animation-name} {
-    @content;
-  }  
-  @-ms-keyframes #{$animation-name} {
-    @content;
-  }
-  @-o-keyframes #{$animation-name} {
-    @content;
-  }  
-  @keyframes #{$animation-name} {
-    @content;
-  }
-}
-
-@mixin animation($str) {
-  -webkit-animation: #{$str};
-  -moz-animation: #{$str};
-  -ms-animation: #{$str};
-  -o-animation: #{$str};
-  animation: #{$str};      
-}
+@import "./../../common.scss";
 
 .zoom{
   height: auto;
@@ -54,19 +30,7 @@
     animation-iteration-count: 1;
   }
 }
-// overlay is shared with pincreate modal too
-.modal-overlay{
-  position: fixed;
-  top:0;
-  left: 0;
-  background:rgb(94, 104, 112);
-  opacity: 0.7;
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-  @include animation('set-overlay');
-  animation-duration: 1s;
-}
+
 
 @include keyframes(zoom-pin) {
   0%{
@@ -87,11 +51,3 @@
   }
 }
 
-@include keyframes(set-overlay) {
-  0%{
-    opacity: 1;
-  }
-  100%{
-    opacity: 0.7;
-  }
-}

client/src/components/mypins/pincreate.scss

@@ -1,3 +1,5 @@
+@import "../../common.scss";
+
 .pincreate{
     position: absolute;
     top: 0;
@@ -12,18 +14,17 @@
     z-index: 1010;
     &.cshow{
       display: block;
-      animation-name: modalshow;
+      @include animation('modalshow');
       animation-duration: 1s;
       animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
       animation-iteration-count: 1;
     }
     &.chide{
       display: block;
-      visibility: hidden;
-      animation-name: modalhide;
-      animation-duration: 0.5s;
+      @include animation('modalhide');
+      animation-duration: 1s;
       animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
-      animation-iteration-count: .5;
+      animation-iteration-count: 1;
     }
   }
 
@@ -38,7 +39,7 @@
     z-index: 1000;
   }
 
-  @keyframes modalshow {
+  @include keyframes(modalshow) {
     0%{
       opacity: 0;
       transform: scale(0)
@@ -49,7 +50,7 @@
     }
   }
 
-  @keyframes modalhide {
+  @include keyframes(modalhide) {
     0%{
       transform: scale(1);
       visibility: visible;

client/src/components/signin/signin.scss

@@ -1,3 +1,5 @@
+@import "../../common.scss";
+
 #sign-in{
     position: fixed;
     left: 0;
@@ -16,22 +18,22 @@
     border-radius: 10px;
     visibility: hidden;
     &.signshow{
-        animation-name: dropdown;
+        @include animation('dropdown');
         animation-duration: 1s;
         animation-timing-function: cubic-bezier();
         animation-iteration-count: 1;
         top: 200px;
         visibility: visible;
     }
     &.signhide{
-        animation-name: pullup;
+        @include animation('pullup');
         animation-duration: 1s;
         animation-timing-function: linear;
         animation-iteration-count: 1;
     }
 }
 
-@keyframes dropdown{
+@include keyframes(dropdown){
     0%{
         transform: translateY(-300px);
     }
@@ -40,7 +42,7 @@
     }
 }
 
-@keyframes pullup{
+@include keyframes(pullup){
     0%{
         transform: translateY(200px);
         visibility: visible;

client/src/index.scss

@@ -1,3 +1,4 @@
+@import "common.scss";
 body{
     background: rgb(255, 255, 255);
     margin:0;
@@ -6,3 +7,26 @@ body{
       overflow: hidden;
     }
   }
+
+  // overlay is shared with pincreate modal too
+.modal-overlay{
+  position: fixed;
+  top:0;
+  left: 0;
+  background:rgb(94, 104, 112);
+  opacity: 0.7;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  @include animation('set-overlay');
+  animation-duration: 1s;
+}
+
+@include keyframes(set-overlay) {
+  0%{
+    opacity: 1;
+  }
+  100%{
+    opacity: 0.7;
+  }
+}