transition.overrides in less-rails-semantic_ui-1.11.1.0

- old
+ new

@@ -12,10 +12,13 @@
 
 /*--------------
      Browse
 ---------------*/
 
+.transition.browse {
+  animation-duration: 500ms;
+}
 .transition.browse.in {
   animation-name: browseIn;
 }
 .transition.browse.out,
 .transition.browse.left.out {
@@ -90,11 +93,11 @@
      Drop
 ---------------*/
 
 .drop.transition {
   transform-origin: top center;
-  animation-duration: 0.5s;
+  animation-duration: 500ms;
   animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
 }
 .drop.transition.in {
   animation-name: dropIn;
 }
@@ -264,10 +267,11 @@
      Flips
 ---------------*/
 
 .flip.transition.in,
 .flip.transition.out {
+  animation-duration: 600ms;
   perspective: 2000px;
 }
 .horizontal.flip.transition.in {
   animation-name: horizontalFlipIn;
 }
@@ -651,61 +655,64 @@
 
 /*--------------
      Swing
 ---------------*/
 
-.transition.swing.in,
+.transition.swing {
+  animation-duration: 800ms;
+}
+
 .transition[class*="swing down"].in {
-  animation-name: swingInY;
+  animation-name: swingInX;
   transform-origin: top center;
 }
 .transition[class*="swing up"].in {
-  animation-name: swingInY;
+  animation-name: swingInX;
   transform-origin: bottom center;
 }
 .transition[class*="swing left"].in {
-  animation-name: swingInX;
+  animation-name: swingInY;
   transform-origin: center right;
 }
 .transition[class*="swing right"].in {
-  animation-name: swingInX;
+  animation-name: swingInY;
   transform-origin: center left;
 }
 
 .transition.swing.out,
 .transition[class*="swing down"].out {
-  animation-name: swingOutY;
+  animation-name: swingOutX;
   transform-origin: top center;
 }
 .transition[class*="swing up"].out {
-  animation-name: swingOutY;
+  animation-name: swingOutX;
   transform-origin: bottom center;
 }
 .transition[class*="swing left"].out {
-  animation-name: swingOutX;
+  animation-name: swingOutY;
   transform-origin: center right;
 }
 .transition[class*="swing right"].out {
-  animation-name: swingOutX;
+  animation-name: swingOutY;
   transform-origin: center left;
 }
 
 /* In */
 @keyframes swingInX {
   0% {
     transform: perspective(1000px) rotateX(90deg);
     opacity: 0;
   }
   40% {
-    transform: perspective(1000px) rotateX(-20deg);
+    transform: perspective(1000px) rotateX(-30deg);
+    opacity: 1;
   }
   60% {
-    transform: perspective(1000px) rotateX(10deg);
+    transform: perspective(1000px) rotateX(15deg);
   }
   80% {
-    transform: perspective(1000px) rotateX(-5deg);
-    opacity: 1;
+    transform: perspective(1000px) rotateX(-7.5deg);
   }
   100% {
     transform: perspective(1000px) rotateX(0deg);
   }
 }
@@ -713,101 +720,94 @@
   0% {
     transform: perspective(1000px) rotateY(-90deg);
     opacity: 0;
   }
   40% {
-    transform: perspective(1000px) rotateY(20deg);
+    transform: perspective(1000px) rotateY(30deg);
+    opacity: 1;
   }
   60% {
-    transform: perspective(1000px) rotateY(-10deg);
+    transform: perspective(1000px) rotateY(-17.5deg);
   }
   80% {
-    transform: perspective(1000px) rotateY(5deg);
-    opacity: 1;
+    transform: perspective(1000px) rotateY(7.5deg);
   }
   100% {
     transform: perspective(1000px) rotateY(0deg);
   }
 }
 
 /* Out */
-@keyframes swingOutUp {
+@keyframes swingOutX {
   0% {
     transform: perspective(1000px) rotateX(0deg);
   }
-  30% {
-    transform: perspective(1000px) rotateX(-20deg);
-    opacity:1;
+  40% {
+    transform: perspective(1000px) rotateX(-7.5deg);
   }
-  100% {
-    transform: perspective(1000px) rotateX(90deg);
-    opacity: 0;
+  60% {
+    transform: perspective(1000px) rotateX(17.5deg);
   }
-}
-@keyframes swingOutDown {
-  0% {
-    transform: perspective(1000px) rotateX(0deg);
+  80% {
+    transform: perspective(1000px) rotateX(-30deg);
+    opacity: 1;
   }
-  30% {
-    transform: perspective(1000px) rotateX(20deg);
-    opacity:1;
-  }
   100% {
-    transform: perspective(1000px) rotateX(-90deg);
+    transform: perspective(1000px) rotateX(90deg);
     opacity: 0;
   }
 }
-@keyframes swingOutLeft {
+@keyframes swingOutY {
   0% {
     transform: perspective(1000px) rotateY(0deg);
   }
-  30% {
-    transform: perspective(1000px) rotateY(20deg);
-    opacity:1;
+  40% {
+    transform: perspective(1000px) rotateY(7.5deg);
   }
-  100% {
-    transform: perspective(1000px) rotateY(-90deg);
-    opacity: 0;
+  60% {
+    transform: perspective(1000px) rotateY(-10deg);
   }
-}
-@keyframes swingOutRight {
-  0% {
-    transform: perspective(1000px) rotateY(0deg);
+  80% {
+    transform: perspective(1000px) rotateY(30deg);
+    opacity: 1;
   }
-  30% {
-    transform: perspective(1000px) rotateY(-20deg);
-    opacity:1;
-  }
   100% {
-    transform: perspective(1000px) rotateY(90deg);
+    transform: perspective(1000px) rotateY(-90deg);
     opacity: 0;
   }
 }
 
+
 /*******************************
        Static Animations
 *******************************/
 
 /*--------------
     Emphasis
 ---------------*/
 
 .flash.transition {
+  animation-duration: 750ms;
   animation-name: flash;
 }
 .shake.transition {
+  animation-duration: 750ms;
   animation-name: shake;
 }
 .bounce.transition {
+  animation-duration: 750ms;
   animation-name: bounce;
 }
 .tada.transition {
+  animation-duration: 750ms;
   animation-name: tada;
 }
 .pulse.transition {
+  animation-duration: 500ms;
   animation-name: pulse;
 }
 .jiggle.transition {
+  animation-duration: 750ms;
   animation-name: jiggle;
 }
 
 /* Flash */
 @keyframes flash {