@mixin fadeIn($duration: 2s) {
  -webkit-animation: fadein $duration; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein $duration; /* Firefox < 16 */
      -ms-animation: fadein $duration; /* Internet Explorer */
       -o-animation: fadein $duration; /* Opera < 12.1 */
          animation: fadein $duration;
}

@mixin fadeInDown($duration: 2s) {
  -webkit-animation: fadeInDown $duration; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadeInDown $duration; /* Firefox < 16 */
      -ms-animation: fadeInDown $duration; /* Internet Explorer */
       -o-animation: fadeInDown $duration; /* Opera < 12.1 */
          animation: fadeInDown $duration;
}

@mixin moveInLeft($duration: 2s) {
  -webkit-animation: moveInLeft $duration; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: moveInLeft $duration; /* Firefox < 16 */
      -ms-animation: moveInLeft $duration; /* Internet Explorer */
       -o-animation: moveInLeft $duration; /* Opera < 12.1 */
          animation: moveInLeft $duration;
}

@mixin moveOutLeft($duration: 2s) {
  -webkit-animation: moveOutLeft $duration; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: moveOutLeft $duration; /* Firefox < 16 */
      -ms-animation: moveOutLeft $duration; /* Internet Explorer */
       -o-animation: moveOutLeft $duration; /* Opera < 12.1 */
          animation: moveOutLeft $duration;
}

@mixin fadeInUp($duration: 2s) {
  -webkit-animation: fadeInUp $duration; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadeInUp $duration; /* Firefox < 16 */
      -ms-animation: fadeInUp $duration; /* Internet Explorer */
       -o-animation: fadeInUp $duration; /* Opera < 12.1 */
          animation: fadeInUp $duration;
}

@mixin fadeOut($duration: 2s) {
  -webkit-animation: fadeOut $duration; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadeOut $duration; /* Firefox < 16 */
      -ms-animation: fadeOut $duration; /* Internet Explorer */
       -o-animation: fadeOut $duration; /* Opera < 12.1 */
          animation: fadeOut $duration;
}

@mixin fadeOutUp($duration: 2s) {
  -webkit-animation: fadeOutUp $duration; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadeOutUp $duration; /* Firefox < 16 */
      -ms-animation: fadeOutUp $duration; /* Internet Explorer */
       -o-animation: fadeOutUp $duration; /* Opera < 12.1 */
          animation: fadeOutUp $duration;
}

@mixin shake {
  animation-name: shake;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@mixin fly {
  animation-name: fly;
  animation-duration: 5s;
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes moveInLeft {
  from { opacity: 1; transform: translate3d(-100%, 0, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes moveOutLeft {
  from { opacity: 1; transform: none; }
  to { opacity: 1; transform: translate3d(-100%, 0, 0);; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 50%, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes fadeOutUp {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate3d(0, -100%, 0); }
}

@keyframes shake {
  from, to {
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes fly {
  from { left: -100%; }
  to   { left: 45%; }
}

@mixin translateX($val) {
  -webkit-transform: translateX($val);
  -moz-transform: translateX($val);
  -o-transform: translateX($val);
  transform: translateX($val);
}

@keyframes moveRight {
  0% { @include translateX(-100%); }
  40% { @include translateX(0%); }
  60% { @include translateX(0%); }
  100% { @include translateX(100%); }
}
