text: @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%); }
  }
  