+Added new short fade transitions

+Added delay-{XX}{m}s class
+Added duration-{XX}{m}s class
~Updated readme

README.md

@@ -32,7 +32,20 @@ $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimat
 
 **Note:** `jQuery#one` is used when you want to execute the event handler at most *once*. More information [here](http://api.jquery.com/one/).
 
-You can change the duration of your animations, add a delay or change the number of times that it plays:
+You can add delay to your animation using the new class : `delay-{duration in ms or s}` where duration is a in seconds or miliseconds (from 1ms to 9ms and 1s to 10s)
+
+```html
+  <div class="animated bounceInLeft delay-1ms">...</div>
+  <div class="animated bounceInRight delay-4ms">...</div>
+  <div class="animated bounceInUp delay-7ms">...</div>
+  <div class="animated bounceInDown delay-1s">...</div>
+  <div class="animated fadeInLeftShort delay-1s duration-5ms">...</div>
+  <div class="animated fadeInRightShort delay-1s duration-2s">...</div>
+  <div class="animated fadeInUpShort delay-1s duration-3s">...</div>
+  <div class="animated fadeInDownShort delay-1s duration-3s">...</div>
+```
+
+Or you can change the duration of your animations, add a delay or change the number of times that it plays with your own css rules :
 
 ```css
 #yourElement {

dist/animate.css

@@ -1434,6 +1434,146 @@ Copyright (c) 2015 Daniel Eden
   animation-name: fadeInUpBig;
 }
 
+@-webkit-keyframes fadeInDownShort {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -33%, 0);
+    transform: translate3d(0, -33%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInDownShort {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -33%, 0);
+    -ms-transform: translate3d(0, -33%, 0);
+    transform: translate3d(0, -33%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    -ms-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInDownShort {
+  -webkit-animation-name: fadeInDownShort;
+  animation-name: fadeInDownShort;
+}
+
+@-webkit-keyframes fadeInLeftShort {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-33%, 0, 0);
+    transform: translate3d(-33%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInLeftShort {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-33%, 0, 0);
+    -ms-transform: translate3d(-33%, 0, 0);
+    transform: translate3d(-33%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    -ms-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInLeftShort {
+  -webkit-animation-name: fadeInLeftShort;
+  animation-name: fadeInLeftShort;
+}
+
+@-webkit-keyframes fadeInRightShort {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(33%, 0, 0);
+    transform: translate3d(33%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInRightShort {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(33%, 0, 0);
+    -ms-transform: translate3d(33%, 0, 0);
+    transform: translate3d(33%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    -ms-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInRightShort {
+  -webkit-animation-name: fadeInRightShort;
+  animation-name: fadeInRightShort;
+}
+
+@-webkit-keyframes fadeInUpShort {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 33%, 0);
+    transform: translate3d(0, 33%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInUpShort {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 33%, 0);
+    -ms-transform: translate3d(0, 33%, 0);
+    transform: translate3d(0, 33%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    -ms-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInUpShort {
+  -webkit-animation-name: fadeInUpShort;
+  animation-name: fadeInUpShort;
+}
+
 @-webkit-keyframes fadeOut {
   0% {
     opacity: 1;
@@ -1699,6 +1839,126 @@ Copyright (c) 2015 Daniel Eden
   animation-name: fadeOutUpBig;
 }
 
+@-webkit-keyframes fadeOutDownShort {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 33%, 0);
+    transform: translate3d(0, 33%, 0);
+  }
+}
+
+@keyframes fadeOutDownShort {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 33%, 0);
+    -ms-transform: translate3d(0, 33%, 0);
+    transform: translate3d(0, 33%, 0);
+  }
+}
+
+.fadeOutDownShort {
+  -webkit-animation-name: fadeOutDownShort;
+  animation-name: fadeOutDownShort;
+}
+
+@-webkit-keyframes fadeOutLeftShort {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(-33%, 0, 0);
+    transform: translate3d(-33%, 0, 0);
+  }
+}
+
+@keyframes fadeOutLeftShort {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(-33%, 0, 0);
+    -ms-transform: translate3d(-33%, 0, 0);
+    transform: translate3d(-33%, 0, 0);
+  }
+}
+
+.fadeOutLeftShort {
+  -webkit-animation-name: fadeOutLeftShort;
+  animation-name: fadeOutLeftShort;
+}
+
+@-webkit-keyframes fadeOutRightShort {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(33%, 0, 0);
+    transform: translate3d(33%, 0, 0);
+  }
+}
+
+@keyframes fadeOutRightShort {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(33%, 0, 0);
+    -ms-transform: translate3d(33%, 0, 0);
+    transform: translate3d(33%, 0, 0);
+  }
+}
+
+.fadeOutRightShort {
+  -webkit-animation-name: fadeOutRightShort;
+  animation-name: fadeOutRightShort;
+}
+
+@-webkit-keyframes fadeOutUpShort {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -33%, 0);
+    transform: translate3d(0, -33%, 0);
+  }
+}
+
+@keyframes fadeOutUpShort {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -33%, 0);
+    -ms-transform: translate3d(0, -33%, 0);
+    transform: translate3d(0, -33%, 0);
+  }
+}
+
+.fadeOutUpShort {
+  -webkit-animation-name: fadeOutUpShort;
+  animation-name: fadeOutUpShort;
+}
+
 @-webkit-keyframes flip {
   0% {
     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
@@ -2710,6 +2970,270 @@ Copyright (c) 2015 Daniel Eden
   animation-name: rollOut;
 }
 
+@-webkit-keyframes slideInDown {
+  0% {
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInDown {
+  0% {
+    -webkit-transform: translate3d(0, -100%, 0);
+    -ms-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInDown {
+  -webkit-animation-name: slideInDown;
+  animation-name: slideInDown;
+}
+
+@-webkit-keyframes slideInLeft {
+  0% {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInLeft {
+  0% {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    -ms-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInLeft {
+  -webkit-animation-name: slideInLeft;
+  animation-name: slideInLeft;
+}
+
+@-webkit-keyframes slideInRight {
+  0% {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInRight {
+  0% {
+    -webkit-transform: translate3d(100%, 0, 0);
+    -ms-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInRight {
+  -webkit-animation-name: slideInRight;
+  animation-name: slideInRight;
+}
+
+@-webkit-keyframes slideInUp {
+  0% {
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+    visibility: visible;
+  }
+
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInUp {
+  0% {
+    -webkit-transform: translate3d(0, 100%, 0);
+    -ms-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+    visibility: visible;
+  }
+
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInUp {
+  -webkit-animation-name: slideInUp;
+  animation-name: slideInUp;
+}
+
+@-webkit-keyframes slideOutDown {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  100% {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes slideOutDown {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  100% {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, 100%, 0);
+    -ms-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.slideOutDown {
+  -webkit-animation-name: slideOutDown;
+  animation-name: slideOutDown;
+}
+
+@-webkit-keyframes slideOutLeft {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  100% {
+    visibility: hidden;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes slideOutLeft {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  100% {
+    visibility: hidden;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    -ms-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.slideOutLeft {
+  -webkit-animation-name: slideOutLeft;
+  animation-name: slideOutLeft;
+}
+
+@-webkit-keyframes slideOutRight {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  100% {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes slideOutRight {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  100% {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    -ms-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.slideOutRight {
+  -webkit-animation-name: slideOutRight;
+  animation-name: slideOutRight;
+}
+
+@-webkit-keyframes slideOutUp {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  100% {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes slideOutUp {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  100% {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, -100%, 0);
+    -ms-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.slideOutUp {
+  -webkit-animation-name: slideOutUp;
+  animation-name: slideOutUp;
+}
+
 @-webkit-keyframes zoomIn {
   0% {
     opacity: 0;
@@ -3126,4 +3650,192 @@ Copyright (c) 2015 Daniel Eden
   animation-name: zoomOutUp;
 }
 
-/*# sourceMappingURL=animate.css.map */
+.delay-1ms {
+  -webkit-animation-delay: "0.1";
+  animation-delay: "0.1";
+}
+
+.delay-2ms {
+  -webkit-animation-delay: "0.2";
+  animation-delay: "0.2";
+}
+
+.delay-3ms {
+  -webkit-animation-delay: "0.3";
+  animation-delay: "0.3";
+}
+
+.delay-4ms {
+  -webkit-animation-delay: "0.4";
+  animation-delay: "0.4";
+}
+
+.delay-5ms {
+  -webkit-animation-delay: "0.5";
+  animation-delay: "0.5";
+}
+
+.delay-6ms {
+  -webkit-animation-delay: "0.6";
+  animation-delay: "0.6";
+}
+
+.delay-7ms {
+  -webkit-animation-delay: "0.7";
+  animation-delay: "0.7";
+}
+
+.delay-8ms {
+  -webkit-animation-delay: "0.8";
+  animation-delay: "0.8";
+}
+
+.delay-9ms {
+  -webkit-animation-delay: "0.9";
+  animation-delay: "0.9";
+}
+
+.delay-1s {
+  -webkit-animation-delay: "1";
+  animation-delay: "1";
+}
+
+.delay-2s {
+  -webkit-animation-delay: "2";
+  animation-delay: "2";
+}
+
+.delay-3s {
+  -webkit-animation-delay: "3";
+  animation-delay: "3";
+}
+
+.delay-4s {
+  -webkit-animation-delay: "4";
+  animation-delay: "4";
+}
+
+.delay-5s {
+  -webkit-animation-delay: "5";
+  animation-delay: "5";
+}
+
+.delay-6s {
+  -webkit-animation-delay: "6";
+  animation-delay: "6";
+}
+
+.delay-7s {
+  -webkit-animation-delay: "7";
+  animation-delay: "7";
+}
+
+.delay-8s {
+  -webkit-animation-delay: "8";
+  animation-delay: "8";
+}
+
+.delay-9s {
+  -webkit-animation-delay: "9";
+  animation-delay: "9";
+}
+
+.delay-10s {
+  -webkit-animation-delay: "10";
+  animation-delay: "10";
+}
+
+.duration-1ms {
+  -webkit-animation-duration: "0.1" !important;
+  animation-duration: "0.1" !important;
+}
+
+.duration-2ms {
+  -webkit-animation-duration: "0.2" !important;
+  animation-duration: "0.2" !important;
+}
+
+.duration-3ms {
+  -webkit-animation-duration: "0.3" !important;
+  animation-duration: "0.3" !important;
+}
+
+.duration-4ms {
+  -webkit-animation-duration: "0.4" !important;
+  animation-duration: "0.4" !important;
+}
+
+.duration-5ms {
+  -webkit-animation-duration: "0.5" !important;
+  animation-duration: "0.5" !important;
+}
+
+.duration-6ms {
+  -webkit-animation-duration: "0.6" !important;
+  animation-duration: "0.6" !important;
+}
+
+.duration-7ms {
+  -webkit-animation-duration: "0.7" !important;
+  animation-duration: "0.7" !important;
+}
+
+.duration-8ms {
+  -webkit-animation-duration: "0.8" !important;
+  animation-duration: "0.8" !important;
+}
+
+.duration-9ms {
+  -webkit-animation-duration: "0.9" !important;
+  animation-duration: "0.9" !important;
+}
+
+.duration-1s {
+  -webkit-animation-duration: "1" !important;
+  animation-duration: "1" !important;
+}
+
+.duration-2s {
+  -webkit-animation-duration: "2" !important;
+  animation-duration: "2" !important;
+}
+
+.duration-3s {
+  -webkit-animation-duration: "3" !important;
+  animation-duration: "3" !important;
+}
+
+.duration-4s {
+  -webkit-animation-duration: "4" !important;
+  animation-duration: "4" !important;
+}
+
+.duration-5s {
+  -webkit-animation-duration: "5" !important;
+  animation-duration: "5" !important;
+}
+
+.duration-6s {
+  -webkit-animation-duration: "6" !important;
+  animation-duration: "6" !important;
+}
+
+.duration-7s {
+  -webkit-animation-duration: "7" !important;
+  animation-duration: "7" !important;
+}
+
+.duration-8s {
+  -webkit-animation-duration: "8" !important;
+  animation-duration: "8" !important;
+}
+
+.duration-9s {
+  -webkit-animation-duration: "9" !important;
+  animation-duration: "9" !important;
+}
+
+.duration-10s {
+  -webkit-animation-duration: "10" !important;
+  animation-duration: "10" !important;
+}

package.json

@@ -5,7 +5,7 @@
     "grunt": "~0.4.1",
     "grunt-autoprefixer": "~0.4.0",
     "grunt-contrib-cssmin": "~0.8.0",
-    "grunt-contrib-sass": "^0.8.1",
+    "grunt-contrib-sass": "^0.9.*",
     "grunt-contrib-watch": "~0.5.3",
     "load-grunt-tasks": "~0.2.0"
   },

source/animate.scss

@@ -82,6 +82,12 @@ $AnimateDuration: 1s;
 @import "fading_entrances/fadeInRightBig";
 @import "fading_entrances/fadeInUpBig";
 
+// Fading short entrances
+@import "fading_entrances/fadeInDownShort";
+@import "fading_entrances/fadeInLeftShort";
+@import "fading_entrances/fadeInRightShort";
+@import "fading_entrances/fadeInUpShort";
+
 // Fading exits
 @import "fading_exits/fadeOut";
 @import "fading_exits/fadeOutDown";
@@ -93,6 +99,12 @@ $AnimateDuration: 1s;
 @import "fading_exits/fadeOutRightBig";
 @import "fading_exits/fadeOutUpBig";
 
+// Fading short exits
+@import "fading_exits/fadeOutDownShort";
+@import "fading_exits/fadeOutLeftShort";
+@import "fading_exits/fadeOutRightShort";
+@import "fading_exits/fadeOutUpShort";
+
 // Flippers
 @import "flippers/flip";
 @import "flippers/flipInX";
@@ -123,6 +135,18 @@ $AnimateDuration: 1s;
 @import "specials/rollIn";
 @import "specials/rollOut";
 
+// Sliding Entrances
+@import "sliding_entrances/slideInDown.scss";
+@import "sliding_entrances/slideInLeft.scss";
+@import "sliding_entrances/slideInRight.scss";
+@import "sliding_entrances/slideInUp.scss";
+
+// Sliding Exits
+@import "sliding_exits/slideOutDown.scss";
+@import "sliding_exits/slideOutLeft.scss";
+@import "sliding_exits/slideOutRight.scss";
+@import "sliding_exits/slideOutUp.scss";
+
 // Zooming entrances
 @import "zooming_entrances/zoomIn";
 @import "zooming_entrances/zoomInDown";
@@ -137,3 +161,6 @@ $AnimateDuration: 1s;
 @import "zooming_exits/zoomOutRight";
 @import "zooming_exits/zoomOutUp";
 
+// Delays and durations
+@import "delays/delays";
+@import "durations/durations";

source/delays/_delays.scss

@@ -0,0 +1,89 @@
+@mixin delayAnimation($delay)
+{
+  $delay: $delay + '';
+  
+  @if (str-index($delay, s) == null) {
+    $delay: unquote($delay + 's');
+  }
+
+  animation-delay: $delay;
+}
+
+//miliseconds
+.delay-1ms {
+  @include delayAnimation(.1);
+}
+
+.delay-2ms {
+  @include delayAnimation(.2);
+}
+
+.delay-3ms {
+  @include delayAnimation(.3);
+}
+
+.delay-4ms {
+  @include delayAnimation(.4);
+}
+
+.delay-5ms {
+  @include delayAnimation(.5);
+}
+
+.delay-6ms {
+  @include delayAnimation(.6);
+}
+
+.delay-7ms {
+  @include delayAnimation(.7);
+}
+
+.delay-8ms {
+  @include delayAnimation(.8);
+}
+
+.delay-9ms {
+  @include delayAnimation(.9);
+}
+
+//seconds
+
+.delay-1s {
+  @include delayAnimation(1);
+}
+
+.delay-2s {
+  @include delayAnimation(2);
+}
+
+.delay-3s {
+  @include delayAnimation(3);
+}
+
+.delay-4s {
+  @include delayAnimation(4);
+}
+
+.delay-5s {
+  @include delayAnimation(5);
+}
+
+.delay-6s {
+  @include delayAnimation(6);
+}
+
+.delay-7s {
+  @include delayAnimation(7);
+}
+
+.delay-8s {
+  @include delayAnimation(8);
+}
+
+.delay-9s {
+  @include delayAnimation(9);
+}
+
+.delay-10s {
+  @include delayAnimation(10);
+}

source/durations/_durations.scss

@@ -0,0 +1,88 @@
+@mixin durationAnimation($duration)
+{
+  $duration: $duration + '';
+  
+  @if (str-index($duration, s) == null) {
+    $duration: unquote($duration + 's');
+  }
+  //need to add the !important rule to overide existing duration
+  animation-duration: $duration !important;
+}
+
+//miliseconds
+.duration-1ms {
+  @include durationAnimation(.1);
+}
+
+.duration-2ms {
+  @include durationAnimation(.2);
+}
+
+.duration-3ms {
+  @include durationAnimation(.3);
+}
+
+.duration-4ms {
+  @include durationAnimation(.4);
+}
+
+.duration-5ms {
+  @include durationAnimation(.5);
+}
+
+.duration-6ms {
+  @include durationAnimation(.6);
+}
+
+.duration-7ms {
+  @include durationAnimation(.7);
+}
+
+.duration-8ms {
+  @include durationAnimation(.8);
+}
+
+.duration-9ms {
+  @include durationAnimation(.9);
+}
+
+//seconds
+.duration-1s {
+  @include durationAnimation(1);
+}
+
+.duration-2s {
+  @include durationAnimation(2);
+}
+
+.duration-3s {
+  @include durationAnimation(3);
+}
+
+.duration-4s {
+  @include durationAnimation(4);
+}
+
+.duration-5s {
+  @include durationAnimation(5);
+}
+
+.duration-6s {
+  @include durationAnimation(6);
+}
+
+.duration-7s {
+  @include durationAnimation(7);
+}
+
+.duration-8s {
+  @include durationAnimation(8);
+}
+
+.duration-9s {
+  @include durationAnimation(9);
+}
+
+.duration-10s {
+  @include durationAnimation(10);
+}

source/fading_entrances/_fadeInDownShort.scss

@@ -0,0 +1,15 @@
+@keyframes fadeInDownShort {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -33%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInDownShort {
+  animation-name: fadeInDownShort;
+}

source/fading_entrances/_fadeInLeftShort.scss

@@ -0,0 +1,15 @@
+@keyframes fadeInLeftShort {
+  0% {
+    opacity: 0;
+    transform: translate3d(-33%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInLeftShort {
+  animation-name: fadeInLeftShort;
+}

source/fading_entrances/_fadeInRightShort.scss

@@ -0,0 +1,15 @@
+@keyframes fadeInRightShort {
+  0% {
+    opacity: 0;
+    transform: translate3d(33%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInRightShort {
+  animation-name: fadeInRightShort;
+}

source/fading_entrances/_fadeInUpShort.scss

@@ -0,0 +1,15 @@
+@keyframes fadeInUpShort {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 33%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInUpShort {
+  animation-name: fadeInUpShort;
+}

source/fading_exits/_fadeOutDownShort.scss

@@ -0,0 +1,14 @@
+@keyframes fadeOutDownShort {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate3d(0, 33%, 0);
+  }
+}
+
+.fadeOutDownShort {
+  animation-name: fadeOutDownShort;
+}

source/fading_exits/_fadeOutLeftShort.scss

@@ -0,0 +1,14 @@
+@keyframes fadeOutLeftShort {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate3d(-33%, 0, 0);
+  }
+}
+
+.fadeOutLeftShort {
+  animation-name: fadeOutLeftShort;
+}

source/fading_exits/_fadeOutRightShort.scss

@@ -0,0 +1,14 @@
+@keyframes fadeOutRightShort {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate3d(33%, 0, 0);
+  }
+}
+
+.fadeOutRightShort {
+  animation-name: fadeOutRightShort;
+}

source/fading_exits/_fadeOutUpShort.scss

@@ -0,0 +1,14 @@
+@keyframes fadeOutUpShort {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate3d(0, -33%, 0);
+  }
+}
+
+.fadeOutUpShort {
+  animation-name: fadeOutUpShort;
+}