Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

@import "compass";

@mixin bounce($name: bounce, $duration: 0, $function: 0, $delay: 0, $count: 0, $fill: 0, $visibility: 0) {
  @include animation($name $duration $function $delay $count $fill);
  //@include visibility($visibility);

  @if ($name == ''bounce'') {
    @at-root {
      @include keyframes(bounce) {
        0%, 20%, 50%, 80%, 100% {
          @include transform(translateY(0px));
        }
        40% {
          @include transform(translateY(-30px));
        }
        60% {
          @include transform(translateY(-15px));
        }
      }
    }
  }
}

.bouncing-button1 {
  @include bounce(1s);
}

.bouncing-button2 {
  @include bounce(2s);
}

SassMeister-output.css

.bouncing-button1 {
  -moz-animation: 1s 0 0 0 0 0;
  -webkit-animation: 1s 0 0 0 0 0;
  animation: 1s 0 0 0 0 0;
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0px);
    transform: translateY(0px);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
.bouncing-button2 {
  -moz-animation: 2s 0 0 0 0 0;
  -webkit-animation: 2s 0 0 0 0 0;
  animation: 2s 0 0 0 0 0;
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0px);
    transform: translateY(0px);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}