ellipsis-compass 1.0.1

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    OTc0NjRhZDg2NDk0Y2U1MzI4ODA4YmI2ODZiOGFmZThmZjVlYjczZg==
+  data.tar.gz: !binary |-
+    OTU1MjI2YjI2OGYwYWJjNTEyM2NiOTlkMTQ0ZDVjNWEyNGUzODM4MA==
+!binary "U0hBNTEy":
+  metadata.gz: !binary |-
+    OTVhYzUwYTBjODU0YWRiOGRiYjE1ZTI3OTYyODY4NGU1M2E3NzRkNGQ5ZDAy
+    ZjhlYWU0ODBmOWFhMDU4Y2M4MTA5MTUyYzI4NTZkZGYyMmM2YmI2NTQzMGI1
+    NGUyYTI2YmNkNDE2NjRhZmZiNzEwZWE2MWFmMWU3NjlkOWM4YTI=
+  data.tar.gz: !binary |-
+    Mjg1NzUxNTQ0YzgxMDg2OTY3ODkxYWE4YjExMTkzNDM1MTM3MWUzZTY3Zjk4
+    NGU0MmQ5MmFiMmY1ZmRmOGI4MzM5NWZjNGQyMmVjZGIwODQ4OGM1MGUzNGU3
+    NTFkYzY3MTAyNzA5Y2QyN2FhNGFhYWQzMTI1OGJjODVhNzBiYWE=

data/lib/ellipsis-compass.rb

@@ -0,0 +1,4 @@
+require 'compass'
+Compass::Frameworks.register('ellipsis-compass',
+  :stylesheets_directory => File.join(File.dirname(__FILE__), '..', 'stylesheets')
+  

data/stylesheets/animation/_animate.scss

@@ -0,0 +1,1206 @@
+//@import "compass/css3/animation";
+@import "compass/css3/transform";
+@import "compass/css3/opacity";
+
+//slide---------------------------------------------------------------------------------------------------------------
+@mixin animate-slideIn() {
+  $name: slideIn;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateY(-200px);
+    }
+    20% {
+      opacity: 0;
+      @include translateY(-200px);
+    }
+    100% {
+      @include translateY(0);
+      opacity: 1;
+    }
+  }
+}
+@mixin animate-slideOut() {
+  $name: slideOut;
+  @include keyframes($name) {
+    0% {
+      opacity: 1;
+      @include translateY(0);
+    }
+    5% {
+      opacity: 1;
+      @include translateY(1px);
+    }
+    20% {
+      opacity: 1;
+      @include translateY(1px);
+    }
+    80%{
+      opacity: 1;
+    }
+    100% {
+      @include translateY(-100px);
+      opacity: 0;
+    }
+  }
+}
+
+
+@mixin animate-slideInDown() {
+  $name: slideInDown;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateY(-2000px);
+    }
+    20% {
+      opacity: 0;
+      @include translateY(-2000px);
+    }
+    100% {
+      @include translateY(0);
+      opacity: 1;
+    }
+  }
+}
+
+@mixin animate-slideInUp() {
+  $name: slideInUp;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateY(2000px);
+    }
+    80% {
+      opacity: 1;
+      @include translateY(-5px);
+    }
+    100% {
+      @include translateY(0);
+
+    }
+  }
+}
+
+@mixin animate-slideInLeft() {
+  $name: slideInLeft;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateX(-2000px);
+    }
+    5% {
+      opacity: 1;
+      @include translateX(-1800px);
+    }
+    80% {
+
+      @include translateX(5px);
+    }
+    100% {
+      @include translateX(0);
+
+    }
+  }
+}
+
+@mixin animate-slideInRight() {
+  $name: slideInRight;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateX(2000px);
+    }
+    5% {
+      opacity: 1;
+      @include translateX(1800px);
+    }
+    80% {
+
+      @include translateX(-5px);
+    }
+    100% {
+      @include translateX(0);
+
+    }
+  }
+}
+
+@mixin animate-slideOutDown() {
+  $name: slideOutDown;
+  @include keyframes($name) {
+    0% {
+      @include translateY(0);
+    }
+    20% {
+      opacity: 1;
+      @include translateY(-5px);
+    }
+    100% {
+      @include translateY(2000px);
+      opacity: 0;
+    }
+  }
+}
+
+@mixin animate-slideOutUp() {
+  $name: slideOutUp;
+  @include keyframes($name) {
+    0% {
+      @include translateY(0);
+    }
+    20% {
+      opacity: 1;
+      @include translateY(0);
+    }
+    100% {
+      opacity: 0;
+      @include translateY(-2000px);
+
+    }
+  }
+}
+
+@mixin animate-slideOutLeft() {
+  $name: slideOutLeft;
+  @include keyframes($name) {
+    0% {
+      @include translateX(0);
+    }
+    20% {
+      opacity: 1;
+      @include translateX(5px);
+    }
+    100% {
+      opacity: 0;
+      @include translateX(-2000px);
+
+    }
+  }
+}
+
+@mixin animate-slideOutRight() {
+  $name: slideOutRight;
+  @include keyframes($name) {
+    0% {
+      @include translateX(0);
+    }
+    20% {
+      opacity: 1;
+      @include translateX(-5px);
+    }
+    100% {
+      opacity: 0;
+      @include translateX(2000px);
+
+    }
+  }
+}
+
+//below based on: https://github.com/daneden/animate.css
+//with some stuff culled from:  https://github.com/ericam/compass-animation
+
+//fade ---------------------------------------------------------------------------------------------------------------
+
+@mixin animate-fadeIn() {
+  $name: fadeIn;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}
+
+@mixin animate-fadeInUp() {
+  $name: fadeInUp;
+  @include keyframes($name) {
+    0% {
+      @include translateY(20px);
+      opacity: 0;
+    }
+    100% {
+      @include translateY(0);
+      opacity: 1;
+    }
+  }
+}
+
+@mixin animate-fadeInDown() {
+  $name: fadeInDown;
+  @include keyframes($name) {
+    0% {
+      @include translateY(-20px);
+      opacity: 0;
+    }
+    100% {
+      @include translateY(0);
+      opacity: 1;
+    }
+  }
+}
+
+@mixin animate-fadeInRight() {
+  $name: fadeInRight;
+  @include keyframes($name) {
+    0% {
+      @include translateX(20px);
+      opacity: 0;
+    }
+    100% {
+      @include translateX(0);
+      opacity: 1;
+    }
+  }
+}
+
+@mixin animate-fadeInLeft() {
+  $name: fadeInLeft;
+  @include keyframes($name) {
+    0% {
+      @include translateX(-20px);
+      opacity: 0;
+    }
+    100% {
+      @include translateX(0);
+      opacity: 1;
+    }
+  }
+}
+
+@mixin animate-fadeInUpBig() {
+  $name: fadeInUpBig;
+  @include keyframes($name) {
+    0% {
+      @include translateY(2000px);
+      opacity: 0;
+    }
+    100% {
+      @include translateY(0);
+      opacity: 1;
+    }
+  }
+}
+
+@mixin animate-fadeInDownBig() {
+  $name: fadeInDownBig;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateY(-2000px);
+    }
+    100% {
+      opacity: 1;
+      @include translateY(0);
+    }
+  }
+}
+
+@mixin animate-fadeInRightBig() {
+  $name: fadeInRightBig;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateX(2000px);
+    }
+    100% {
+      opacity: 1;
+      @include translateX(0);
+    }
+  }
+}
+
+@mixin animate-fadeInLeftBig() {
+  $name: fadeInLeftBig;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateX(-2000px);
+    }
+    100% {
+      opacity: 1;
+      @include translateX(0);
+    }
+  }
+}
+
+@mixin animate-fadeOut() {
+  $name: fadeOut;
+  @include keyframes($name) {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}
+
+@mixin animate-fadeOutUp() {
+  $name: fadeOutUp;
+  @include keyframes($name) {
+    0% {
+      @include translateY(0);
+      opacity: 1;
+    }
+    100% {
+      @include translateY(-20px);
+      opacity: 0;
+    }
+  }
+}
+
+@mixin animate-fadeOutDown() {
+  $name: fadeOutDown;
+  @include keyframes($name) {
+    0% {
+      @include translateY(0);
+      opacity: 1;
+    }
+    100% {
+      @include translateY(20px);
+      opacity: 0;
+    }
+  }
+}
+
+@mixin animate-fadeOutRight() {
+  $name: fadeOutRight;
+  @include keyframes($name) {
+    0% {
+      @include translateX(0);
+      opacity: 1;
+    }
+    100% {
+      @include translateX(20px);
+      opacity: 0;
+    }
+  }
+}
+
+@mixin animate-fadeOutLeft() {
+  $name: fadeOutLeft;
+  @include keyframes($name) {
+    0% {
+      @include translateX(0);
+      opacity: 1;
+    }
+    100% {
+      @include translateX(-20px);
+      opacity: 0;
+    }
+  }
+}
+
+@mixin animate-fadeOutUpBig() {
+  $name: fadeOutUpBig;
+  @include keyframes($name) {
+    0% {
+      @include translateY(0);
+      opacity: 1;
+    }
+    100% {
+      @include translateY(-2000px);
+      opacity: 0;
+    }
+  }
+}
+
+@mixin animate-fadeOutDownBig() {
+  $name: fadeOutDownBig;
+  @include keyframes($name) {
+    0% {
+      opacity: 1;
+      @include translateY(0);
+    }
+    100% {
+      opacity: 0;
+      @include translateY(2000px);
+    }
+  }
+}
+
+@mixin animate-fadeOutRightBig() {
+  $name: fadeOutRightBig;
+  @include keyframes($name) {
+    0% {
+      opacity: 1;
+      @include translateX(0);
+    }
+    100% {
+      opacity: 0;
+      @include translateX(2000px);
+    }
+  }
+}
+
+@mixin animate-fadeOutLeftBig() {
+  $name: fadeOutLeftBig;
+  @include keyframes($name) {
+    0% {
+      opacity: 1;
+      @include translateX(0);
+    }
+    100% {
+      opacity: 0;
+      @include translateX(-2000px);
+    }
+  }
+}
+
+//bounce -------------------------------------------------------------------------------------------------------------
+
+@mixin animate-bounceIn() {
+  $name: bounceIn;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include scale(0.3);
+    }
+    50% {
+      opacity: 1;
+      @include scale(1.05);
+    }
+    70% {
+      @include scale(0.9);
+    }
+    100% {
+      @include scale(1);
+    }
+  }
+}
+
+@mixin animate-bounceInDown() {
+  $name: bounceInDown;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateY(-2000px);
+    }
+    60% {
+      opacity: 1;
+      @include translateY(30px);
+    }
+    80% {
+      @include translateY(-10px);
+    }
+    100% {
+      @include translateY(0);
+    }
+  }
+}
+
+@mixin animate-bounceInUp() {
+  $name: bounceInUp;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateY(2000px);
+    }
+    60% {
+      opacity: 1;
+      @include translateY(-30px);
+    }
+    80% {
+      @include translateY(10px);
+    }
+    100% {
+      @include translateY(0);
+    }
+  }
+}
+
+@mixin animate-bounceInRight() {
+  $name: bounceInRight;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateX(2000px);
+    }
+    60% {
+      opacity: 1;
+      @include translateX(-30px);
+    }
+    80% {
+      @include translateX(10px);
+    }
+    100% {
+      @include translateX(0);
+    }
+  }
+}
+
+@mixin animate-bounceInLeft() {
+  $name: bounceInLeft;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+      @include translateX(-2000px);
+    }
+    60% {
+      opacity: 1;
+      @include translateX(30px);
+    }
+    80% {
+      @include translateX(-10px);
+    }
+    100% {
+      @include translateX(0);
+    }
+  }
+}
+
+@mixin animate-bounceOut() {
+  $name: bounceOut;
+  @include keyframes(bounceOut) {
+    0% {
+      @include scale(1);
+    }
+    25% {
+      @include scale(0.95);
+    }
+    50% {
+      opacity: 1;
+      @include scale(1.1);
+    }
+    100% {
+      opacity: 0;
+      @include scale(0.3);
+    }
+  }
+}
+
+@mixin animate-bounceOutUp() {
+  $name: bounceOutUp;
+  @include keyframes($name) {
+    0% {
+      @include translateY(0);
+    }
+    20% {
+      opacity: 1;
+      @include translateY(20px);
+    }
+    100% {
+      opacity: 0;
+      @include translateY(-2000px);
+    }
+  }
+}
+
+@mixin animate-bounceOutDown() {
+  $name: bounceOutDown;
+  @include keyframes($name) {
+    0% {
+      @include translateY(0);
+    }
+    20% {
+      opacity: 1;
+      @include translateY(-20px);
+    }
+    100% {
+      opacity: 0;
+      @include translateY(2000px);
+    }
+  }
+}
+
+@mixin animate-bounceOutLeft() {
+  $name: bounceOutLeft;
+  @include keyframes($name) {
+    0% {
+      @include translateX(0);
+    }
+    20% {
+      opacity: 1;
+      @include translateX(20px);
+    }
+    100% {
+      opacity: 0;
+      @include translateX(-2000px);
+    }
+  }
+}
+
+@mixin animate-bounceOutRight() {
+  $name: bounceOutRight;
+  @include keyframes($name) {
+    0% {
+      @include translateX(0);
+    }
+    20% {
+      opacity: 1;
+      @include translateX(-20px);
+    }
+    100% {
+      opacity: 0;
+      @include translateX(2000px);
+    }
+  }
+}
+
+//rotate -----------------------------------------------------------------------------------------------------------
+
+@mixin animate-rotateIn() {
+  $name: rotateIn;
+  @include keyframes($name) {
+    0% {
+      @include transform-origin(center, center);
+      @include rotate(-200deg);
+      opacity: 0;
+    }
+    100% {
+      @include transform-origin(center, center);
+      @include rotate(0);
+      opacity: 1;
+    }
+  }
+}
+
+@mixin animate-rotateInUpLeft() {
+  $name: rotateInUpLeft;
+  @include keyframes($name) {
+    0% {
+      @include transform-origin(left, bottom);
+      @include rotate(90deg);
+      opacity: 0;
+    }
+    100% {
+      @include transform-origin(left, bottom);
+      @include rotate(0);
+      opacity: 1;
+    }
+  }
+}
+
+@mixin animate-rotateInDownLeft() {
+  $name: rotateInDownLeft;
+  @include keyframes($name) {
+    0% {
+      @include transform-origin(left, bottom);
+      @include rotate(-90deg);
+      opacity: 0;
+    }
+    100% {
+      @include transform-origin(left, bottom);
+      @include rotate(0);
+      opacity: 1;
+    }
+  }
+}
+
+@mixin animate-rotateInUpRight() {
+  $name: rotateInUpRight;
+  @include keyframes($name) {
+    0% {
+      @include transform-origin(right, bottom);
+      @include rotate(-90deg);
+      opacity: 0;
+    }
+    100% {
+      @include transform-origin(right, bottom);
+      @include rotate(0);
+      opacity: 1;
+    }
+  }
+}
+
+@mixin animate-rotateInDownRight() {
+  $name: rotateInDownRight;
+  @include keyframes($name) {
+    0% {
+      @include transform-origin(right, bottom);
+      @include rotate(90deg);
+      opacity: 0;
+    }
+    100% {
+      @include transform-origin(right, bottom);
+      @include rotate(0);
+      opacity: 1;
+    }
+  }
+}
+
+@mixin animate-rotateOut() {
+  $name: rotateOut;
+  @include keyframes($name) {
+    0% {
+      @include transform-origin(center, center);
+      @include rotate(0);
+      opacity: 1;
+    }
+    100% {
+      @include transform-origin(center, center);
+      @include rotate(200deg);
+      opacity: 0;
+    }
+  }
+}
+
+@mixin animate-rotateOutUpLeft() {
+  $name: rotateOutUpLeft;
+  @include keyframes($name) {
+    0% {
+      @include transform-origin(left, bottom);
+      @include rotate(0);
+      opacity: 1;
+    }
+    100% {
+      @include transform-origin(left, bottom);
+      @include rotate(-90deg);
+      opacity: 0;
+    }
+  }
+}
+
+@mixin animate-rotateOutDownLeft() {
+  $name: rotateOutDownLeft;
+  @include keyframes($name) {
+    0% {
+      @include transform-origin(left, bottom);
+      @include rotate(0);
+      opacity: 1;
+    }
+    100% {
+      @include transform-origin(left, bottom);
+      @include rotate(90deg);
+      opacity: 0;
+    }
+  }
+}
+
+@mixin animate-rotateOutUpRight() {
+  $name: rotateOutUpRight;
+  @include keyframes($name) {
+    0% {
+      @include transform-origin(right, bottom);
+      @include rotate(0);
+      opacity: 1;
+    }
+    100% {
+      @include transform-origin(right, bottom);
+      @include rotate(90deg);
+      opacity: 0;
+    }
+  }
+}
+
+@mixin animate-rotateOutDownRight() {
+  $name: rotateOutDownRight;
+  @include keyframes($name) {
+    0% {
+      @include transform-origin(right, bottom);
+      @include rotate(0);
+      opacity: 1;
+    }
+    100% {
+      @include transform-origin(right, bottom);
+      @include rotate(-90deg);
+      opacity: 0;
+    }
+  }
+}
+
+//flip -------------------------------------------------------------------------------------------------------------
+
+@mixin animate-flipInX() {
+  $name: flipInX;
+  @include keyframes($name) {
+    0% {
+      @include transform(perspective(400px) rotateX(90deg));
+      @include opacity(0);
+    }
+    40% {
+      @include transform(perspective(400px) rotateX(-10deg));
+    }
+    70% {
+      @include transform(perspective(400px) rotateX(10deg));
+    }
+    100% {
+      @include transform(perspective(400px) rotateX(0deg));
+      @include opacity(1);
+    }
+  }
+}
+
+@mixin animate-flipInY() {
+  $name: flipInY;
+  @include keyframes($name) {
+    0% {
+      @include transform(perspective(400px) rotateY(90deg));
+      @include opacity(0);
+    }
+    40% {
+      @include transform(perspective(400px) rotateY(-10deg));
+    }
+    70% {
+      @include transform(perspective(400px) rotateY(10deg));
+    }
+    100% {
+      @include transform(perspective(400px) rotateY(0deg));
+      @include opacity(1);
+    }
+  }
+}
+
+@mixin animate-flipOutX() {
+  $name: flipOutX;
+  @include keyframes($name) {
+    0% {
+      @include transform(perspective(400px) rotateX(0deg));
+      @include opacity(1);
+    }
+    100% {
+      @include transform(perspective(400px) rotateX(90deg));
+      @include opacity(0);
+    }
+  }
+}
+
+@mixin animate-flipOutY() {
+  $name: flipOutY;
+  @include keyframes($name) {
+    0% {
+      @include transform(perspective(400px) rotateY(0deg));
+      @include opacity(1);
+    }
+    100% {
+      @include transform(perspective(400px) rotateY(90deg));
+      @include opacity(0);
+    }
+  }
+}
+
+//roll ------------------------------------------------------------------------------------------------------------
+
+@mixin animate-rollIn() {
+  $name: rollIn;
+  @include keyframes($name) {
+    0% {
+      @include opacity(0);
+      @include transform(translateX(-100%) rotate(-120deg));
+    }
+    100% {
+      @include opacity(1);
+      @include transform(translateX(0px) rotate(0deg));
+    }
+  }
+}
+
+@mixin animate-rollOut() {
+  $name: rollOut;
+  @include keyframes($name) {
+    0% {
+      @include opacity(1);
+      @include transform(translateX(0px) rotate(0deg));
+    }
+    100% {
+      @include opacity(0);
+      @include transform(translateX(-100%) rotate(-120deg));
+    }
+  }
+}
+
+//lightspeed ----------------------------------------------------------------------------------------------------
+
+@mixin animate-lightSpeedIn() {
+  $name: lightSpeedIn;
+  @include keyframes($name) {
+    0% {
+      @include transform(translateX(100%) skewX(-30deg));
+      @include opacity(0);
+    }
+    60% {
+      @include transform(translateX(-20%) skewX(30deg));
+      @include opacity(1);
+    }
+    80% {
+      @include transform(translateX(0%) skewX(-15deg));
+      @include opacity(1);
+    }
+    100% {
+      @include transform(translateX(0%) skewX(0deg));
+      @include opacity(1);
+    }
+  }
+}
+
+@mixin animate-lightSpeedOut() {
+  $name: lightSpeedOut;
+  @include keyframes($name) {
+    0% {
+      @include transform(translateX(0%) skewX(0deg));
+      @include opacity(1);
+    }
+    100% {
+      @include transform(translateX(100%) skewX(-30deg));
+      @include opacity(0);
+    }
+  }
+}
+
+//attention ---------------------------------------------------------------------------------------------------------
+
+@mixin animate-flash() {
+  $name: flash;
+  @include keyframes($name) {
+    0% {
+      opacity: 1;
+    }
+    25% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    75% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}
+
+@mixin animate-pulse() {
+  $name: pulse;
+  @include keyframes($name) {
+    0% {
+      @include scale(1);
+    }
+    50% {
+      @include scale(1.1);
+    }
+    100% {
+      @include scale(1);
+    }
+  }
+}
+
+@mixin animate-shake() {
+  $name: shake;
+  @include keyframes($name) {
+    0% {
+      @include translateX(0);
+    }
+    10% {
+      @include translateX(-10px);
+    }
+    20% {
+      @include translateX(10px);
+    }
+    30% {
+      @include translateX(-10px);
+    }
+    40% {
+      @include translateX(10px);
+    }
+    50% {
+      @include translateX(-10px);
+    }
+    60% {
+      @include translateX(10px);
+    }
+    70% {
+      @include translateX(-10px);
+    }
+    80% {
+      @include translateX(10px);
+    }
+    90% {
+      @include translateX(-10px);
+    }
+    100% {
+      @include translateX(0);
+    }
+  }
+}
+
+@mixin animate-swing() {
+  $name: swing;
+  @include keyframes($name) {
+    20%, 40%, 60%, 80%, 100% {
+      @include transform-origin(top, center);
+    }
+    20% {
+      @include rotate(15deg);
+    }
+    40% {
+      @include rotate(-10deg);
+    }
+    60% {
+      @include rotate(5deg);
+    }
+    80% {
+      @include rotate(-5deg);
+    }
+    100% {
+      @include rotate(0deg);
+    }
+  }
+}
+
+@mixin animate-tada() {
+  $name: tada;
+  @include keyframes($name) {
+    0% {
+      @include scale(1);
+    }
+    10% {
+      @include transform(scale(0.9) rotate(-3deg));
+    }
+    20% {
+      @include transform(scale(0.9) rotate(-3deg));
+    }
+    30% {
+      @include transform(scale(1.1) rotate(3deg));
+    }
+    40% {
+      @include transform(scale(1.1) rotate(-3deg));
+    }
+    50% {
+      @include transform(scale(1.1) rotate(3deg));
+    }
+    60% {
+      @include transform(scale(1.1) rotate(-3deg));
+    }
+    70% {
+      @include transform(scale(1.1) rotate(3deg));
+    }
+    80% {
+      @include transform(scale(1.1) rotate(-3deg));
+    }
+    90% {
+      @include transform(scale(1.1) rotate(3deg));
+    }
+    100% {
+      @include transform(scale(1) rotate(0));
+    }
+  }
+}
+
+@mixin animate-wiggle() {
+  $name: wiggle;
+  @include keyframes($name) {
+    0% {
+      @include skewX(9deg);
+    }
+    10% {
+      @include skewX(-8deg);
+    }
+    20% {
+      @include skewX(7deg);
+    }
+    30% {
+      @include skewX(-6deg);
+    }
+    40% {
+      @include skewX(5deg);
+    }
+    50% {
+      @include skewX(-4deg);
+    }
+    60% {
+      @include skewX(3deg);
+    }
+    70% {
+      @include skewX(-2deg);
+    }
+    80% {
+      @include skewX(1deg);
+    }
+    90% {
+      @include skewX(0deg);
+    }
+    100% {
+      @include skewX(0deg);
+    }
+  }
+}
+
+@mixin animate-wobble() {
+  $name: wobble;
+  @include keyframes($name) {
+    0% {
+      @include translateX(0%);
+    }
+    15% {
+      @include transform(translateX(-25%) rotate(-5deg));
+    }
+    30% {
+      @include transform(translateX(20%) rotate(3deg));
+    }
+    45% {
+      @include transform(translateX(-15%) rotate(-3deg));
+    }
+    60% {
+      @include transform(translateX(10%) rotate(2deg));
+    }
+    75% {
+      @include transform(translateX(-5%) rotate(-1deg));
+    }
+    100% {
+      @include transform(translateX(0%));
+    }
+  }
+}
+
+@mixin animate-rubberband() {
+  $name: rubberband;
+  @include keyframes($name) {
+    0% {
+      @include transform(scale(1));
+    }
+    30% {
+      @include transform(scaleX(1.25) scaleY(0.75));
+    }
+    40% {
+      @include transform(scaleX(0.75) scaleY(1.25));
+    }
+    60% {
+      @include transform(scaleX(1.15) scaleY(0.85));
+    }
+    100% {
+      @include transform(scale(1));
+    }
+  }
+}
+
+@mixin animate-hinge() {
+  $name: hinge;
+  @include keyframes($name) {
+    0% {
+      @include transform(rotate(0));
+      @include transform-origin(top, left);
+      @include animation-timing-function(ease-in-out);
+    }
+    20%,60% {
+      @include transform(rotate(80deg));
+      @include transform-origin(top, left);
+      @include animation-timing-function(ease-in-out);
+    }
+    40% {
+      @include transform(rotate(60deg));
+      @include transform-origin(top, left);
+      @include animation-timing-function(ease-in-out);
+    }
+    80% {
+      @include transform(rotate(60deg));
+      @include translateY(0);
+      opacity:1;
+      @include transform-origin(top, left);
+      @include animation-timing-function(ease-in-out);
+    }
+    100% {
+      @include translateY(700px);
+      opacity:0;
+    }
+  }
+}
+
+
+
+
+
+