Merge pull request #465 from FelipeMartinin/master

New animation: headShake

Author: daneden

README.md

@@ -21,6 +21,7 @@
   * `pulse`
   * `rubberBand`
   * `shake`
+  * `headShake`
   * `swing`
   * `tada`
   * `wobble`
@@ -157,6 +158,7 @@ Next, run `grunt watch` to watch for changes and compile your custom builds. For
   "flash": false,
   "pulse": false,
   "shake": true,
+  "headShake": true,
   "swing": true,
   "tada": true,
   "wobble": true,

animate-config.json

@@ -6,6 +6,7 @@
     "pulse": true,
     "rubberBand": true,
     "shake": true,
+    "headShake": true,
     "swing": true,
     "tada": true,
     "wobble": true,

animate.css

@@ -25,18 +25,14 @@ Copyright (c) 2015 Daniel Eden
   animation-duration: 2s;
 }
 
+.animated.flipOutX,
+.animated.flipOutY,
 .animated.bounceIn,
 .animated.bounceOut {
   -webkit-animation-duration: .75s;
   animation-duration: .75s;
 }
 
-.animated.flipOutX,
-.animated.flipOutY {
-  -webkit-animation-duration: .75s;
-  animation-duration: .75s;
-}
-
 @-webkit-keyframes bounce {
   from, 20%, 53%, 80%, to {
     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
@@ -284,6 +280,77 @@ Copyright (c) 2015 Daniel Eden
   animation-name: shake;
 }
 
+@-webkit-keyframes headShake {
+  0 {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  6.5% {
+    -webkit-transform: translateX(-6px) rotateY(-9deg);
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    -webkit-transform: translateX(5px) rotateY(7deg);
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    -webkit-transform: translateX(-3px) rotateY(-5deg);
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    -webkit-transform: translateX(2px) rotateY(3deg);
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes headShake {
+  0 {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  6.5% {
+    -webkit-transform: translateX(-6px) rotateY(-9deg);
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    -webkit-transform: translateX(5px) rotateY(7deg);
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    -webkit-transform: translateX(-3px) rotateY(-5deg);
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    -webkit-transform: translateX(2px) rotateY(3deg);
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.headShake {
+  -webkit-animation-timing-function: ease-in-out;
+  animation-timing-function: ease-in-out;
+  -webkit-animation-name: headShake;
+  animation-name: headShake;
+}
+
 @-webkit-keyframes swing {
   20% {
     -webkit-transform: rotate3d(0, 0, 1, 15deg);

animate.min.css

@@ -0,0 +1,33 @@
+@keyframes headShake {
+
+
+  0 {
+    transform: translateX(0)
+  }
+
+  6.5% {
+    transform: translateX(-6px) rotateY(-9deg)
+  }
+
+  18.5% {
+    transform: translateX(5px) rotateY(7deg)
+  }
+
+  31.5% {
+    transform: translateX(-3px) rotateY(-5deg)
+  }
+
+  43.5% {
+    transform: translateX(2px) rotateY(3deg)
+  }
+
+  50% {
+    transform: translateX(0)
+  }
+}
+
+
+.headShake {
+  animation-timing-function: ease-in-out;
+  animation-name: headShake;
+}