Defined default variables for all effect mixins, contained in _proper…

…ties

README.md

@@ -44,11 +44,11 @@ Once your files have been added to your project and you've customized your `@imp
 
 ```
 .your-class-name {
-  @include bounceIn($duration, $delay, $function, $fill, $visibility);
+  @include bounceIn();
 }
 ```
 
-Each option is configurable:
+The mixin includes configurable options to customize the `delay`, `duration`, `function` and `fill-mode` of your animations.
 
 ```
 .your-class-name {

_attention/_bounce.scss

@@ -27,7 +27,7 @@
 	60% {transform: translateY(-15px);}
 }
 
-@mixin bounce($duration, $delay, $function, $fill, $visibility) {
+@mixin bounce($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
 	@include animation-name(bounce);
   @include duration($duration);
 	@include delay($delay);

_attention/_flash.scss

@@ -23,7 +23,7 @@
 	25%, 75% {opacity: 0;}
 }
 
-@mixin flash($duration, $delay, $function, $fill, $visibility) {
+@mixin flash($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
 	@include animation-name(flash);
   @include duration($duration);
 	@include delay($delay);

_attention/_pulse.scss

@@ -30,7 +30,7 @@
   100% {transform: scale(1);}
 }
 
-@mixin pulse($duration, $delay, $function, $fill, $visibility) {
+@mixin pulse($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(pulse);
   @include duration($duration);
   @include delay($delay);

_attention/_shake.scss

@@ -28,7 +28,7 @@
 	20%, 40%, 60%, 80% {transform: translateX(10px);}
 }
 
-@mixin shake($duration, $delay, $function, $fill, $visibility) {
+@mixin shake($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
 	@include animation-name(shake);
 	@include duration($duration);
 	@include delay($delay);

_attention/_swing.scss

@@ -39,7 +39,7 @@
 	100% { transform: rotate(0deg); }
 }
 
-@mixin swing($duration, $delay, $function, $fill, $visibility) {
+@mixin swing($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
 	@include transform-origin(top center);
 	@include animation-name(swing);
   @include duration($duration);

_attention/_tada.scss

@@ -38,7 +38,7 @@
 	100% {transform: scale(1) rotate(0);}
 }
 
-@mixin tada($duration, $delay, $function, $fill, $visibility) {
+@mixin tada($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
 	@include animation-name(tada);
   @include duration($duration);
 	@include delay($delay);

_attention/_wobble.scss

@@ -50,7 +50,7 @@
   100% {transform: translateX(0%);}
 }
 
-@mixin wobble($duration, $delay, $function, $fill, $visibility) {
+@mixin wobble($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
 	@include animation-name(wobble);
   @include duration($duration);
   @include delay($delay);

_bouncing-entrances/_bounceIn.scss

@@ -33,7 +33,7 @@
   100% {transform: scale(1);}
 }
 
-@mixin bounceIn($duration, $delay, $function, $fill, $visibility) {
+@mixin bounceIn($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(bounceIn);
   @include duration($duration);
   @include delay($delay);

_bouncing-entrances/_bounceInDown.scss

@@ -33,7 +33,7 @@
   100% {transform: translateY(0);}
 }
 
-@mixin bounceInDown($duration, $delay, $function, $fill, $visibility) {
+@mixin bounceInDown($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(bounceInDown);
   @include duration($duration);
   @include delay($delay);

_bouncing-entrances/_bounceInLeft.scss

@@ -33,7 +33,7 @@
   100% {transform: translateX(0);}
 }
 
-@mixin bounceInLeft($duration, $delay, $function, $fill, $visibility) {
+@mixin bounceInLeft($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(bounceInLeft);
   @include duration($duration);
   @include delay($delay);

_bouncing-entrances/_bounceInRight.scss

@@ -33,7 +33,7 @@
   100% {transform: translateX(0);}
 }
 
-@mixin bounceInRight($duration, $delay, $function, $fill, $visibility) {
+@mixin bounceInRight($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(bounceInRight);
   @include duration($duration);
   @include delay($delay);

_bouncing-entrances/_bounceInUp.scss

@@ -33,7 +33,7 @@
   100% {transform: translateY(0);}
 }
 
-@mixin bounceInUp($duration, $delay, $function, $fill, $visibility) {
+@mixin bounceInUp($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(bounceInUp);
   @include duration($duration);
   @include delay($delay);

_bouncing-entrances/bouncing-entrances.scss

@@ -1,6 +1,6 @@
 // INDEX OF BOUNCING ENTRANCES
 
-@import 
+@import
   "_bounceIn",
   "_bounceInDown",
   "_bounceInLeft",

_bouncing-exits/_bounceOut.scss

@@ -33,7 +33,7 @@
   100% {opacity: 0; transform: scale(.3);}
 }
 
-@mixin bounceOut($duration, $delay, $function, $fill, $visibility) {
+@mixin bounceOut($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(bounceOut);
   @include duration($duration);
   @include delay($delay);

_bouncing-exits/_bounceOutDown.scss

@@ -28,7 +28,7 @@
   100% {opacity: 0; transform: translateY(2000px);}
 }
 
-@mixin bounceOutDown($duration, $delay, $function, $fill, $visibility) {
+@mixin bounceOutDown($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(bounceOutDown);
   @include duration($duration);
   @include delay($delay);

_bouncing-exits/_bounceOutLeft.scss

@@ -28,7 +28,7 @@
   100% {opacity: 0; transform: translateX(-2000px);}
 }
 
-@mixin bounceOutLeft($duration, $delay, $function, $fill, $visibility) {
+@mixin bounceOutLeft($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(bounceOutLeft);
   @include duration($duration);
   @include delay($delay);

_bouncing-exits/_bounceOutRight.scss

@@ -28,7 +28,7 @@
   100% {opacity: 0; transform: translateX(2000px);}
 }
 
-@mixin bounceOutRight($duration, $delay, $function, $fill, $visibility) {
+@mixin bounceOutRight($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(bounceOutRight);
   @include duration($duration);
   @include delay($delay);

_bouncing-exits/_bounceOutUp.scss

@@ -28,7 +28,7 @@
 	100% {opacity: 0; transform: translateY(-2000px);}
 }
 
-@mixin bounceOutUp($duration, $delay, $function, $fill, $visibility) {
+@mixin bounceOutUp($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
 	@include animation-name(bounceOutUp);
   @include duration($duration);
 	@include delay($delay);

_fading-entrances/_fadeIn.scss

@@ -23,7 +23,7 @@
 	100% {opacity: 1;}
 }
 
-@mixin fadeIn($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeIn($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
 	@include animation-name(fadeIn);
   @include duration($duration);
 	@include delay($delay);

_fading-entrances/_fadeInDown.scss

@@ -23,7 +23,7 @@
   100% {opacity: 1; transform: translateY(0);}
 }
 
-@mixin fadeInDown($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeInDown($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(fadeInDown);
   @include duration($duration);
   @include delay($delay);

_fading-entrances/_fadeInDownBig.scss

@@ -23,7 +23,7 @@
   100% {opacity: 1; transform: translateY(0);}
 }
 
-@mixin fadeInDownBig($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeInDownBig($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(fadeInDownBig);
   @include duration($duration);
   @include delay($delay);

_fading-entrances/_fadeInLeft.scss

@@ -23,7 +23,7 @@
   100% {opacity: 1; transform: translateX(0);}
 }
 
-@mixin fadeInLeft($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeInLeft($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(fadeInLeft);
   @include duration($duration);
   @include delay($delay);

_fading-entrances/_fadeInLeftBig.scss

@@ -23,7 +23,7 @@
   100% {opacity: 1; transform: translateX(0);}
 }
 
-@mixin fadeInLeftBig($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeInLeftBig($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(fadeInLeftBig);
   @include duration($duration);
   @include delay($delay);

_fading-entrances/_fadeInRight.scss

@@ -23,7 +23,7 @@
   100% {opacity: 1; transform: translateX(0);}
 }
 
-@mixin fadeInRight($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeInRight($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(fadeInRight);
   @include duration($duration);
   @include delay($delay);

_fading-entrances/_fadeInRightBig.scss

@@ -23,7 +23,7 @@
   100% {opacity: 1; transform: translateX(0);}
 }
 
-@mixin fadeInRightBig($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeInRightBig($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(fadeInRightBig);
   @include duration($duration);
   @include delay($delay);

_fading-entrances/_fadeInUp.scss

@@ -23,7 +23,7 @@
   100% {opacity: 1; transform: translateY(0);}
 }
 
-@mixin fadeInUp($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeInUp($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(fadeInUp);
   @include duration($duration);
   @include delay($delay);

_fading-entrances/_fadeInUpBig.scss

@@ -23,7 +23,7 @@
   100% {opacity: 1; transform: translateY(0);}
 }
 
-@mixin fadeInUpBig($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeInUpBig($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(fadeInUpBig);
   @include duration($duration);
   @include delay($delay);

_fading-exits/_fadeOut.scss

@@ -23,7 +23,7 @@
 	100% {opacity: 0;}
 }
 
-@mixin fadeOut($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeOut($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
 	@include animation-name(fadeOut);
 	@include duration($duration);
 	@include delay($delay);

_fading-exits/_fadeOutDown.scss

@@ -23,7 +23,7 @@
   100% {opacity: 0; transform: translateY(20px);}
 }
 
-@mixin fadeOutDown($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeOutDown($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(fadeOutDown);
   @include duration($duration);
   @include delay($delay);

_fading-exits/_fadeOutDownBig.scss

@@ -23,7 +23,7 @@
   100% {opacity: 0; transform: translateY(2000px);}
 }
 
-@mixin fadeOutDownBig($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeOutDownBig($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(fadeOutDownBig);
   @include duration($duration);
   @include delay($delay);

_fading-exits/_fadeOutLeft.scss

@@ -23,7 +23,7 @@
   100% {opacity: 0; transform: translateX(-20px);}
 }
 
-@mixin fadeOutLeft($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeOutLeft($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(fadeOutLeft);
   @include duration($duration);
   @include delay($delay);

_fading-exits/_fadeOutLeftBig.scss

@@ -23,7 +23,7 @@
   100% {opacity: 0; transform: translateX(-2000px);}
 }
 
-@mixin fadeOutLeftBig($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeOutLeftBig($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(fadeOutLeftBig);
   @include duration($duration);
   @include delay($delay);

_fading-exits/_fadeOutRight.scss

@@ -23,7 +23,7 @@
   100% {opacity: 0; transform: translateX(20px);}
 }
 
-@mixin fadeOutRight($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeOutRight($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(fadeOutRight);
   @include duration($duration);
   @include delay($delay);

_fading-exits/_fadeOutRightBig.scss

@@ -23,7 +23,7 @@
   100% {opacity: 0; transform: translateX(2000px);}
 }
 
-@mixin fadeOutRightBig($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeOutRightBig($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(fadeOutRightBig);
   @include duration($duration);
   @include delay($delay);

_fading-exits/_fadeOutUp.scss

@@ -23,7 +23,7 @@
   100% {opacity: 0; transform: translateY(-20px);}
 }
 
-@mixin fadeOutUp($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeOutUp($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(fadeOutUp);
   @include duration($duration);
   @include delay($delay);

_fading-exits/_fadeOutUpBig.scss

@@ -18,7 +18,7 @@
   100% {opacity: 0; transform: translateY(-2000px);}
 }
 
-@mixin fadeOutUpBig($duration, $delay, $function, $fill, $visibility) {
+@mixin fadeOutUpBig($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(fadeOutUpBig);
   @include duration($duration);
   @include delay($delay);

_flippers/_flip.scss

@@ -30,7 +30,7 @@
   100% {transform: perspective(400px) scale(1); animation-timing-function: ease-in;}
 }
 
-@mixin flip($duration, $delay, $function, $fill, $visibility) {
+@mixin flip($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include transform-style(preserve-3d);
   @include animation-name(flip);
   @include duration($duration);

_flippers/_flipInX.scss

@@ -23,7 +23,7 @@
     100% {transform: perspective(400px) rotateX(0deg); opacity: 1;}
 }
 
-@mixin flipInX($duration, $delay, $function, $fill, $visibility) {
+@mixin flipInX($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(flipInX);
   @include duration($duration);
   @include delay($delay);

_flippers/_flipInY.scss

@@ -29,7 +29,7 @@
   100% {transform: perspective(400px) rotateY(0deg); opacity: 1;}
 }
 
-@mixin flipInY($duration, $delay, $function, $fill, $visibility) {
+@mixin flipInY($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(flipInY);
   @include duration($duration);
   @include delay($delay);

_flippers/_flipOutX.scss

@@ -23,7 +23,7 @@
   100% {transform: perspective(400px) rotateX(90deg); opacity: 0;}
 }
 
-@mixin flipOutX($duration, $delay, $function, $fill, $visibility) {
+@mixin flipOutX($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(flipOutX);
   @include duration($duration);
   @include delay($delay);

_flippers/_flipOutY.scss

@@ -19,7 +19,7 @@
   100% {transform: perspective(400px) rotateY(90deg); opacity: 0;}
 }
 
-@mixin flipOutY($duration, $delay, $function, $fill, $visibility) {
+@mixin flipOutY($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(flipOutY);
   @include duration($duration);
   @include delay($delay);

_lightspeed/_lightSpeedIn.scss

@@ -33,7 +33,7 @@
 	100% { transform: translateX(0%) skewX(0deg); opacity: 1;}
 }
 
-@mixin lightSpeedIn($duration, $delay, $fill, $visibility) {
+@mixin lightSpeedIn($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(lightSpeedIn);
 	@include function(ease-out);
   @include duration($duration);

_lightspeed/_lightSpeedOut.scss

@@ -23,7 +23,7 @@
   100% { transform: translateX(100%) skewX(-30deg); opacity: 0;}
 }
 
-@mixin lightSpeedOut($duration, $delay, $fill, $visibility) {
+@mixin lightSpeedOut($duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
   @include animation-name(lightSpeedOut);
   @include function(ease-in);
   @include duration($duration);