New animation: headShake - An amazing animation for negative feedbacks

s001dxp · Sep 21, 2015 · 73004d8 · 73004d8
1 parent d8144b9
commit 73004d8
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 7 deletions.
diff --git a/README.md b/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,

diff --git a/animate-config.json b/animate-config.json
@@ -6,6 +6,7 @@
     "pulse": true,
     "rubberBand": true,
     "shake": true,
+    "headShake": true,
     "swing": true,
     "tada": true,
     "wobble": true,

diff --git a/animate.css b/animate.css
@@ -24,18 +24,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);
@@ -283,6 +279,77 @@ Copyright (c) 2015 Daniel Eden
   animation-name: shake;
 }
 
+@-webkit-keyframes headShake {
+  0 {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  12.5% {
+    -webkit-transform: translateX(-6px) rotateY(-9deg);
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  37.5% {
+    -webkit-transform: translateX(5px) rotateY(7deg);
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  62.5% {
+    -webkit-transform: translateX(-3px) rotateY(-5deg);
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  87.5% {
+    -webkit-transform: translateX(2px) rotateY(3deg);
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes headShake {
+  0 {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  12.5% {
+    -webkit-transform: translateX(-6px) rotateY(-9deg);
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  37.5% {
+    -webkit-transform: translateX(5px) rotateY(7deg);
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  62.5% {
+    -webkit-transform: translateX(-3px) rotateY(-5deg);
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  87.5% {
+    -webkit-transform: translateX(2px) rotateY(3deg);
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  100% {
+    -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);

diff --git a/animate.min.css b/animate.min.css
diff --git a/source/attention_seekers/headShake.css b/source/attention_seekers/headShake.css
@@ -0,0 +1,33 @@
+@keyframes headShake {
+
+
+  0 {
+    transform: translateX(0)
+  }
+
+  12.5% {
+    transform: translateX(-6px) rotateY(-9deg)
+  }
+
+  37.5% {
+    transform: translateX(5px) rotateY(7deg)
+  }
+
+  62.5% {
+    transform: translateX(-3px) rotateY(-5deg)
+  }
+
+  87.5% {
+    transform: translateX(2px) rotateY(3deg)
+  }
+
+  100% {
+    transform: translateX(0)
+  }
+}
+
+
+.headShake {
+  animation-timing-function: ease-in-out;
+  animation-name: headShake;
+}