Added rubberband attention grabber from Animate.css

fomantic · Jan 14, 2015 · be51cea · be51cea
1 parent 15d005a
commit be51cea
Showing 1 changed file with 34 additions and 0 deletions.
diff --git a/src/themes/default/modules/transition.overrides b/src/themes/default/modules/transition.overrides
@@ -22,6 +22,9 @@
 .pulse.transition {
   animation-name: pulse;
 }
+.rubberband.transition {
+  animation-name: rubberband;
+}
 
 /* Flash */
 @keyframes flash {
@@ -95,6 +98,37 @@
 
 }
 
+/* Rubberband */
+@keyframes rubberband {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+
+  30% {
+    transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    transform: scale3d(.95, 1.05, 1);
+  }
+
+  75% {
+    transform: scale3d(1.05, .95, 1);
+  }
+
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
 /*--------------
      Flips
 ---------------*/