real-world-css-libraries 1.0.3 → 1.0.5

package/libs/woah-v1.3.1.css

@@ -0,0 +1,1025 @@
+/* https://github.com/joerez/Woah.css/blob/master/woah.css */
+/*!
+ * Woah.css - http://joerezendes.com/woah.css
+ * Version - 1.0
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Github - https://github.com/joerez/Woah.css
+ *
+ * Copyright (c) 2018 Joe Rezendes
+ */
+
+
+
+
+
+/**
+ * Animations
+ */
+.woah {
+  animation-fill-mode: both;
+}
+
+.woah.infinite {
+  animation-iteration-count: infinite;
+}
+
+
+/**
+ * Wowzors
+ * - Spiral flips and rotates
+ */
+@keyframes wowzors {
+
+  1% {
+    opacity: 0%;
+  }
+
+  10% {
+    opacity: 100%;
+    transform: rotate(360deg) translateX(150px) translateY(400px) rotate(-360deg) rotateY(360deg);
+  }
+
+  20% {
+    transform: rotate(720deg) translateX(150px) translateY(350px) rotate(-720deg) rotateY(720deg) ;
+  }
+
+  30% {
+    transform: rotate(1080deg) translateX(150px) translateY(300px) rotate(-1080deg) rotateY(1080deg) ;
+  }
+
+  40% {
+    transform: rotate(1440deg) translateX(150px) translateY(250px) rotate(-1440deg) rotateY(1440deg) ;
+  }
+
+  50% {
+    transform: rotate(1800deg) translateX(150px) translateY(200px) rotate(-1800deg) rotateY(1800deg) ;
+  }
+
+  60% {
+    transform: rotate(1440deg) translateX(150px) translateY(150px) rotate(-1440deg) rotateY(1440deg) ;
+  }
+
+  70% {
+    transform: rotate(1080deg) translateX(150px) translateY(0px) rotate(1080deg) rotateX(180deg);
+  }
+
+
+}
+
+.wowzors {
+  animation-timing-function: linear;
+  transform-origin: bottom center;
+  animation-name: wowzors;
+  animation-duration: 5s;
+}
+
+/**
+ * comeInStyle
+ * - Comes in style, this isn't your oridinary entrance
+ */
+@keyframes comeInStyle {
+  0% {
+    opacity: 100%;
+    transform: translate3d(0px, -3000px, -2000px);
+  }
+
+  1% {
+    opacity: 0%;
+    transform: translate3d(0px, -3000px, -2000px);
+  }
+
+  25% {
+    transform: translate3d(0px, -200px, -200px) scale(3) rotateX(0) rotateY(0);
+  }
+
+  50% {
+    transform: translate3d(200px, -0px, -0px) scale(6) rotateX(180deg) rotateY(90deg);
+
+  }
+
+
+  90% {
+    opacity: 0%;
+    transform: translate3d(-200px, 200px, 200px) scale(3) rotateX(360deg) rotateY(180deg);
+  }
+
+  100% {
+    opacity: 100%;
+    transform: none;
+  }
+
+}
+
+.comeInStyle {
+  animation-timing-function: ease-out;
+  transform-origin: bottom center;
+  animation-name: comeInStyle;
+  animation-duration: 5s;
+}
+
+/**
+ * leaveInStyle
+ * - Leaves in style, this isn't your oridinary entrance
+ */
+@keyframes leaveInStyle {
+
+  10% {
+    transform: translate3d(0px, -100px, 0px) scale(1);
+  }
+
+  12% {
+    transform: translate3d(0px, 5px, 0px) scale(1);
+  }
+
+  14% {
+    transform: translate3d(0px, -10px, 0px) scale(1);
+  }
+
+  16% {
+    transform: translate3d(0px, 0px, 0px) scale(1);
+  }
+
+  18% {
+    transform: translate3d(0px, 10px, 0px) scale(1);
+  }
+
+  25% {
+    transform: translate3d(0px, 0px, 0px) skewY(10deg) scale(2);
+  }
+
+  27% {
+    transform: translate3d(0px, -5px, 0px) skewY(7deg) scale(1.8);
+  }
+
+  29% {
+    transform: translate3d(0px, 5px, 0px) skewY(10deg) scale(2);
+  }
+
+  60% {
+    transform: translate3d(-400px, 5px, 0px) rotate(360deg) rotateY(-760deg) skewY(-10deg) scale(2);
+  }
+
+  70% {
+    transform: translate3d(400px, 5px, 0px) rotate(0deg) rotateY(-360deg) skewY(10deg) scale(2);
+  }
+
+  80% {
+    transform: translate3d(0px, 0px, 0px) rotateY(0deg) skewY(0deg) scale(1);
+  }
+
+  90% {
+    transform: translate3d(0px, 0px, 0px) rotateY(0deg) rotateX(720deg) scale(1.5);
+  }
+
+  99% {
+    transform: translate3d(0px, 0px, 0px) rotateY(0deg) rotateX(0deg) skewY(0deg) scale(.01);
+  }
+
+  100% {
+    transform: translate3d(0px, 0px, 0px) rotateY(0deg) rotateX(0deg) skewY(0deg) scale(.001);
+    visibility: hidden;
+  }
+
+}
+
+.leaveInStyle {
+  animation-timing-function: ease-out;
+  transform-origin: bottom center;
+  animation-name: leaveInStyle;
+  animation-duration: 5s;
+  animation-fill-mode: forwards;
+}
+
+
+/**
+ * rotateComplex
+ * - Comes in style, this isn't your oridinary entrance
+ */
+@keyframes rotateComplex {
+  1% {
+    opacity: 90%;
+    transform: translate3d(0,0,0) rotate(0deg);
+  }
+  10% {
+    transform: translate3d(200px, -140px, 0) rotate(1080deg);
+  }
+  20% {
+    transform: translate3d(-200px, 140px, 0) rotate(-160deg);
+  }
+  30% {
+    transform: translate3d(-200px, -140px, 0) rotate(340deg);
+  }
+  40% {
+    transform: translate3d(-200px, 140px, 0) rotate(-720deg);
+  }
+  50% {
+    transform: translate3d(200px, 140px, 0) rotate(120deg) scale(1.2);
+  }
+  60% {
+    transform: translate3d(0px, 0px, 100px) rotate(1080deg) scale(1.5);
+  }
+  65% {
+    transform: translate3d(0px, 0px, 200px) rotate(-1080deg) scale(2.0);
+  }
+  90% {
+    transform: translate3d(0px, 0px, 600px) rotate(6080deg) scale(5.0);
+  }
+  100% {
+    transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(1.0);
+  }
+}
+
+ .rotateComplex {
+   animation-timing-function: linear;
+   transform-origin: bottom center;
+   animation-name: rotateComplex;
+   animation-duration: 5s;
+ }
+ /**
+  * rotateComplexOut
+  * - Comes in style, this isn't your oridinary entrance
+  */
+ @keyframes rotateComplexOut {
+   1% {
+     opacity: 90%;
+     transform: translate3d(0,0,0) rotate(0deg);
+   }
+   10% {
+     transform: translate3d(200px, -140px, 0) rotate(1080deg);
+   }
+   20% {
+     transform: translate3d(-200px, 140px, 0) rotate(-160deg);
+   }
+   30% {
+     transform: translate3d(-200px, -140px, 0) rotate(340deg);
+   }
+   40% {
+     transform: translate3d(-200px, 140px, 0) rotate(-720deg);
+   }
+   50% {
+     transform: translate3d(200px, 140px, 0) rotate(120deg) scale(1.2);
+   }
+   60% {
+     transform: translate3d(0px, 0px, 100px) rotate(1080deg) scale(1.5);
+   }
+   65% {
+     transform: translate3d(0px, 0px, 200px) rotate(-1080deg) scale(2.0);
+   }
+   90% {
+     transform: translate3d(0px, 0px, 600px) rotate(6080deg) scale(5.0);
+   }
+   99% {
+     transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(.01);
+     opacity: 100%
+   }
+   100% {
+     display: none;
+     transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(0);
+     opacity: 0%;
+   }
+
+ }
+
+  .rotateComplexOut {
+    animation-timing-function: linear;
+    transform-origin: bottom center;
+    animation-name: rotateComplexOut;
+    animation-duration: 5s;
+  }
+
+ /**
+  * flyOut
+  * - Flies out
+  */
+  @keyframes flyOut {
+
+    1% {
+      transform: translate3d(0,0,0) scale(1);
+    }
+
+
+    20% {
+      transform: translate3d(0,100px,400px) rotateX(90deg);
+    }
+    30% {
+      transform: translate3d(300px,0px,100px) rotateX(95deg);
+    }
+    40% {
+      transform: translate3d(-600px,-200px,0px) rotateX(80deg);
+    }
+    60% {
+      transform: translate3d(2000px,-2000px,0px) rotateX(0deg);
+    }
+    70% {
+      transform: translate3d(-2000px, 2000px, 0px) rotateX(60deg) scale(5);
+    }
+    80% {
+      transform: translate3d(0,4000px,0px);
+    }
+    85% {
+      transform: translate3d(-0px,-0px,0px) scale(.07);
+    }
+    100% {
+      transform: translate3d(2000px,-2000px,0px);
+      display: none;
+    }
+}
+
+.flyOut {
+  animation-timing-function: ease-out;
+  transform-origin: bottom center;
+  animation-name: flyOut;
+  animation-duration: 5s;
+}
+
+
+/**
+ * flyIn
+ * - Flies In
+ */
+ @keyframes flyIn {
+
+   0% {
+     transform: translate3d(2000px,-2000px,0px);
+     display: none;
+   }
+
+   10%, 15% {
+     transform: translate3d(-0px,-0px,0px) scale(.07);
+   }
+
+   20% {
+     transform: translate3d(0,1000px,0px);
+   }
+   30% {
+     transform: translate3d(-2000px, 2000px, 0px) rotateX(60deg) scale(5);
+   }
+   40% {
+     transform: translate3d(2000px,-2000px,0px) rotateX(0deg) scale(2);
+   }
+   60% {
+     transform: translate3d(-600px,-200px,0px) rotateX(0deg) scale(.3);
+   }
+
+   80% {
+     transform: translate3d(0,0,0) scale(.01);
+   }
+
+   100% {
+     transform: translate3d(0,0,0);
+   }
+}
+
+.flyIn {
+ animation-timing-function: ease-out;
+ transform-origin: bottom center;
+ animation-name: flyIn;
+ animation-duration: 5s;
+}
+
+
+/**
+ * blackMirror
+ * - Woah
+ */
+@keyframes blackMirror {
+
+  0% {
+    transition: none;
+  }
+
+  1% {
+    transform: translate3d(0,0,0);
+  }
+
+  50% {
+    transform: translate3d(200px,0,0);
+    background: rgba(0,0,0,1);
+  }
+
+  99% {
+    transform: translate3d(-200px,0,0);
+    background: rgba(0,0,0,1);
+  }
+
+  100% {
+    transform: translate3d(0,0,0);
+  }
+
+}
+
+
+
+ .blackMirror {
+   animation-timing-function: ease-out;
+   transform-origin: bottom center;
+   animation-name: blackMirror;
+   animation-duration: .01s;
+   animation-iteration-count: 1200;
+ }
+ /**
+  * blackMirrorTextVersion
+  * - Woah (Black Text)
+  */
+ @keyframes blackMirrorTextVersion {
+   1% {
+     transform: translate3d(0,0,0);
+   }
+
+   50% {
+     transform: translate3d(200px,0,0);
+     color: black;
+   }
+
+   99% {
+     transform: translate3d(-200px,0,0);
+     color: black;
+   }
+
+   100% {
+     transform: translate3d(0,0,0);
+   }
+
+ }
+
+
+
+  .blackMirrorTextVersion {
+    animation-timing-function: ease-out;
+    transform-origin: bottom center;
+    animation-name: blackMirrorTextVersion;
+    animation-duration: .01s;
+    animation-iteration-count: 600;
+  }
+
+
+  /**
+   * spin3D
+   * - Spins in 3D
+   */
+  @keyframes spin3D {
+
+    15% {
+      transform: rotateY(180deg) scale(2);
+    }
+
+    30% {
+      transform: rotateX(360deg) rotateY(180deg) skewX(50deg) scale(2);
+    }
+
+    45% {
+      transform: rotateX(480deg) rotateY(360deg) skewX(-50deg) skewY(0deg)  scale(1.5);
+    }
+
+    60% {
+      transform: rotateX(0deg) rotateY(0deg) skewX(0deg) skewY(0deg)  scale(2);
+    }
+
+    70% {
+      transform: rotateX(0deg) rotateY(0deg) skewX(0deg) skewY(0deg)  scale(3);
+    }
+
+    80% {
+      transform: rotateX(0deg) rotateY(540deg) skewX(0deg) skewY(0deg)  scale(3);
+    }
+
+    90% {
+      transform: rotateX(180deg) rotateY(1080deg) skewX(0deg) skewY(0deg)  scale(.3);
+    }
+
+    97% {
+      transform: rotateX(40deg) rotateY(80deg) skewX(0deg) skewY(0deg)  scale(2);
+    }
+
+
+  }
+
+
+
+   .spin3D {
+     animation-timing-function: linear;
+     transform-origin: bottom center;
+     animation-name: spin3D;
+     animation-duration: 5s;
+   }
+
+   /**
+    * simpleEntrance
+    * - enter in simply
+    */
+   @keyframes simpleEntrance {
+
+     0% {
+       opacity: 0%;
+       transform: translate3d(-2000px,500px,0) scale(10);
+     }
+
+     1% {
+       opacity: 100%
+     }
+
+     40% {
+       transform: translate3d(2000px,0px,0) scale(5);
+     }
+     50% {
+       transform: translate3d(-2000px,-100px,0) scale(3);
+     }
+     60% {
+       transform: translate3d(2000px,100px,0) scale(2);
+     }
+     70% {
+       transform: translate3d(-2000px,400px,0) scale(.1);
+     }
+
+     75% {
+       transform: translate3d(0px,0px,0) scale(.1);
+     }
+
+     80% {
+       transform:  rotate(360deg) translateX(150px) rotate(-360deg)
+     }
+
+   }
+
+    .simpleEntrance {
+      animation-timing-function: linear;
+      transform-origin: bottom center;
+      animation-name: simpleEntrance;
+      animation-duration: 10s;
+    }
+
+
+    /**
+     * scaleOut
+     * - Big Scale Out
+     */
+    @keyframes scaleOut {
+
+    from {
+        transform: scale(.1) translate3d(0,0px,0);
+      }
+
+      80% {
+        transform: scale(4) translate3d(0, 70px, 0);
+        box-shadow: 0px 200px 200px 200px rgba(0,0,0,1);
+      }
+
+
+
+      100% {
+        transform: scale(0) translate3d(0,0px,0);
+        visibility: hidden;
+      }
+
+    }
+
+
+
+
+
+     .scaleOut {
+       animation-timing-function: linear;
+       transform-origin: bottom center;
+       animation-name: scaleOut;
+       animation-duration: 3s;
+       background: url('https://i.imgur.com/XB0kRsy.gif');
+       background-size: cover;
+       background-repeat: no-repeat;
+       background-position: center;
+     }
+
+
+     /**
+      * dealWithIt
+      * - Sunglasses and coolness.
+      */
+     @keyframes dealWithIt {
+
+       1% {
+         transform: translate3d(0,0,0) scale(1);
+         opacity: 1;
+       }
+
+
+       30% {
+         transform: translate3d(0,160px,0) scale(1);
+         opacity: 1;
+       }
+
+       70% {
+         transform: translate3d(0,160px,0) scale(1);
+         opacity: 1;
+       }
+
+       85% {
+         transform: translate3d(0,160px,0) scale(1);
+         opacity: 1;
+       }
+
+       99% {
+         transform: translate3d(0,-2000px,0) scale(1);
+       }
+
+       to {
+         visibility: hidden;
+         opacity: 0;
+       }
+
+     }
+
+     @keyframes dealWithItNorm {
+
+       1% {
+
+       }
+
+       30% {
+         transform: translate3d(0,0px,0) scale(1);
+         opacity: 1;
+       }
+
+       40% {
+         transform: rotate(10deg);
+         opacity: 1;
+       }
+
+       50% {
+         transform: rotate(-10deg);
+       }
+
+       60% {
+         transform: rotate(10deg);
+       }
+
+       70% {
+         transform: rotate(-10deg);
+       }
+
+       80% {
+         transform: rotate(0deg);
+       }
+
+
+     }
+
+
+     .dealWithIt::after {
+       height: 300px;
+       width: 300px;
+       z-index: 5;
+       background-repeat: no-repeat;
+       content: '';
+       background: url('http://www.stickpng.com/assets/thumbs/584999a27b7d4d76317f5ffe.png');
+       animation-timing-function: ease-in-out;
+       transform-origin: bottom center;
+       animation-name: dealWithIt;
+       animation-duration: 5s;
+       animation-fill-mode: forwards;
+       vertical-align: baseline;
+       position: absolute;
+       top: -200%;
+       right: -50%;
+       bottom: -50%;
+       left: -50%;
+
+     }
+
+      .dealWithIt {
+        /*position: absolute;*/
+        animation-timing-function: ease-in-out;
+        transform-origin: bottom center;
+        animation-name: dealWithItNorm;
+        animation-duration: 5s;
+      }
+
+
+      /**
+       * fedoraTip
+       * - Tip your fedora.
+       */
+      @keyframes fedoraTip {
+
+        5% {
+          transform: translate3d(-80px,60px,0) scale(.8);
+          opacity: 1;
+        }
+
+
+        40% {
+          transform: translate3d(-80px,60px,0) rotate(-30deg) scale(.8);
+          opacity: 1;
+        }
+
+        60% {
+          transform: translate3d(-80px,60px,0) rotate(0deg) scale(.8);
+          opacity: 1;
+        }
+
+
+        to {
+          transform: translate3d(-80px,-2000px,0) rotate(180deg) scale(.8);
+          visibility: hidden;
+          opacity: 1;
+        }
+
+      }
+
+      @keyframes fedoraTipNorm {
+
+        1% {
+
+        }
+
+        10% {
+          transform: translate3d(0,0px,0) rotate(0deg) scale(1);
+        }
+
+        30% {
+          transform: translate3d(0,0px,0) rotate(-5deg) scale(1);
+          opacity: 1;
+          box-shadow: 0px 5px 10px rgba(0,0,0,1);
+        }
+
+        70% {
+          transform: translate3d(0,0px,0) rotate(0deg) scale(1);
+          opacity: 1;
+        }
+
+
+
+      }
+
+
+      .fedoraTip::after {
+        z-index: 5;
+        width: 450px;
+        content: '';
+        background: url('https://vignette.wikia.nocookie.net/roblox/images/3/39/ROBLOX_Black_Pinstripe_Fedora.png/revision/latest?cb=20170213154343');
+        background-repeat: no-repeat;
+        animation-timing-function: ease-in-out;
+        transform-origin: bottom center;
+        animation-name: fedoraTip;
+        animation-duration: 5s;
+        animation-fill-mode: forwards;
+        vertical-align: baseline;
+        position: absolute;
+        top: -200%;
+        right: -50%;
+        bottom: -50%;
+        left: -50%;
+
+      }
+
+       .fedoraTip {
+         /*position: absolute;*/
+         animation-timing-function: ease-in-out;
+         transform-origin: bottom center;
+         animation-name: fedoraTipNorm;
+         animation-duration: 5s;
+       }
+
+
+
+
+/****************WOW***************/
+
+/**
+ * blazingStar
+ * - Radiate shiny things
+ */
+ @keyframes blazingStar {
+   1% {
+     border-radius: none;
+     box-shadow: 0px 0px 40px rgba(255, 255, 0,.6);
+     transform: scale(1);
+   }
+   10% {
+     box-shadow: 0px 0px 0px;
+     /*border-radius: 50%;*/
+     transform: scale(1);
+   }
+   20% {
+     box-shadow: 0px 0px 120px rgba(255, 255, 0,.6);
+     /*border-radius: 50%;*/
+     transform: scale(1);
+   }
+   30% {
+     box-shadow: 0px 0px 0px;
+     /*border-radius: 50%;*/
+     transform: scale(1);
+   }
+   40% {
+     box-shadow: 0px 0px 120px rgba(255, 255, 0,.6);
+     /*border-radius: 50%;*/
+     transform: scale(1);
+   }
+   50% {
+     box-shadow: 0px 0px 0px;
+     /*border-radius: 50%;*/
+     transform: scale(1);
+   }
+   60% {
+     box-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
+     /*border-radius: 50%;*/
+     transform: scale(1);
+   }
+
+   70% {
+     box-shadow: 0px 0px 0px;
+     /*border-radius: 50%;*/
+     transform: scale(1);
+   }
+   80% {
+     box-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
+     /*border-radius: 50%;*/
+     transform: scale(1);
+   }
+
+   90% {
+     box-shadow: 0px 0px 0px;
+     /*border-radius: 50%;*/
+     transform: scale(1);
+   }
+   99% {
+     box-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
+     /*border-radius: 50%;*/
+     transform: scale(1.1);
+   }
+ }
+
+.blazingStar {
+  animation-timing-function: ease-out;
+  transform-origin: bottom center;
+  animation-name: blazingStar;
+  animation-duration: 5s;
+}
+
+/**
+ * blazingStarText
+ * - Radiate shiny text
+ */
+@keyframes blazingStarText {
+  1% {
+    text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
+    transform: scale(1);
+  }
+  10% {
+    text-shadow: 0px 0px 0vh rgba(255, 255, 0,0);
+    transform: scale(1);
+  }
+  20% {
+    text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
+    transform: scale(1);
+  }
+  30% {
+    text-shadow: 0px 0px 0vh rgba(255, 255, 0,0);
+    transform: scale(1);
+  }
+  40% {
+    text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
+    transform: scale(1);
+  }
+  50% {
+    text-shadow: 0px 0px 0vh rgba(255, 255, 0,0);
+    transform: scale(1);
+  }
+  60% {
+    text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
+    transform: scale(1);
+  }
+
+  70% {
+    text-shadow: 0px 0px 0vh rgba(255, 255, 0,0);
+    transform: scale(1);
+  }
+  80% {
+    text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
+    transform: scale(1);
+  }
+
+  90% {
+    text-shadow: 0px 0px 0vh rgba(255, 255, 0,0);
+    transform: scale(1);
+  }
+  99% {
+    text-shadow: 0px 0px 20vh rgba(255, 255, 0,1);
+    transform: scale(1);
+  }
+}
+
+.blazingStarText {
+  animation-timing-function: ease-out;
+  transform-origin: bottom center;
+  animation-name: blazingStarText;
+  animation-duration: 5s;
+}
+
+
+/**
+ * starWars
+ * - Starwars sequence
+ */
+@keyframes starWars {
+  0% {
+    transform: translate3d(0,500px,0) rotateX(-60deg) scale(2);
+  }
+  99.9% {
+    transform: translate3d(0, -1000px, 0) rotateX(60deg) scale(.19);
+  }
+  100% {
+    display: none;
+  }
+}
+
+.starWars {
+  animation-timing-function: ease-out;
+  transform-origin: bottom center;
+  animation-name: starWars;
+  animation-duration: 10s;
+}
+
+
+/**************** NORMIE *************/
+
+/**
+ * fadeIn
+ * - fades in
+ */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+
+}
+
+.fadeIn {
+  animation-timing-function: linear;
+  transform-origin: bottom center;
+  animation-name: fadeIn;
+  animation-duration: .3s;
+}
+
+
+/**
+ * Pulse
+ * - Increases and decreases in size
+ */
+@keyframes pulse {
+  from {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  to {
+    transform: scale(1);
+  }
+
+}
+
+.pulse {
+  animation-timing-function: linear;
+  transform-origin: bottom center;
+  animation-name: pulse;
+  animation-duration: .75s;
+  animation-iteration-count: 3;
+}
+
+/**
+ * shaker
+ * - Increases and decreases in size
+ */
+@keyframes shaker {
+  from {
+    transform: translate3d(0,0,0);
+  }
+
+  33% {
+    transform: translate3d(-20px,10px,0);
+  }
+
+  66% {
+    transform: translate3d(20px,0px,0);
+  }
+
+
+  to {
+    transform: translate3d(0,0,0);
+  }
+
+}
+
+.shaker {
+  animation-timing-function: linear;
+  transform-origin: bottom center;
+  animation-name: shaker;
+  animation-duration: .1s;
+  animation-iteration-count: 10;
+}