Compass and CSS for cross browser keyframe AND related animation

animationKeyFrameCom.scss

// animation.css
@include keyframes(reduce) {
  0% {
    width: 100%;
    background-color: #828282;
  }
  80% {
    background-color: #828282;
  }
  100% {
    width: 0;
    background-color: red;
  }
}

@include keyframes(down50) {
100% { top: 0px; }
}

@include keyframes(up50) {
100% { top: -50px; }
}

@include keyframes(rotate){
  from {
    @include transform(rotate(0deg));
    //background-color: #00454B;
  }
  to {
    @include transform(rotate(359deg));
    //background-color: #129BA5;
  }
}

@include keyframes(active) {
  from { color: #505050; }
  to { color: #ffffff; }
}

@include keyframes(flipHidden) {
  from { -moz-transform: rotateY(0deg); }
  to { -moz-transform: rotateY(90deg); }
}

@include keyframes(bet) {
  0% { @include box-shadow(0 0 0); }
  100% { @include box-shadow(0 0 25px #c9a100); }
}

@include keyframes(check-call) {
  from { @include box-shadow(0 0 0); }
  to { @include box-shadow(0 0 25px #c9a100); }
}

@include keyframes(alert) {
  100% { background-color: #960000;}
}

@include keyframes(notif) {
  0% {  top: -50px; }
  25% { top: 0; }
  75% { top: 0;}
  100% { top: -50px;}
}

.down50-animation {
  @include animation(down50 1s ease-in-out);
  @include animation-fill-mode(forwards);
}

.notif-animation {
  @include animation(notif 3s linear);
}

.up50-animation {
  @include animation(up50 1s ease-in-out);
  @include animation-fill-mode(forwards);
}

.reduce-animation {
  @include animation-duration(20s);
  @include animation-iteration-count(1);
  @include animation-name(reduce);
  @include animation-duration(linear);
  @include animation-timing-function(linear);
}

.rotate-animation {
  @include animation-duration(.1s);
  @include animation-name(rotate);
  @include animation-iteration-count(infinite);
}

.flipHidden-animation {
  @include animation-duration(.5s);
  @include animation-iteration-count(1);
  @include animation-name(flipHidden);
}

.flash {
  @include animation-duration(.7s);
  @include animation-iteration-count(infinite);
  @include animation-timing-function(linear);
  @include animation-direction(alternate);
}

.alert-animation {
  @include animation-name(alert);
}

.active-animation {
  @include animation-name(active);
}

.bet-animation {
  @include animation-name(bet);
}

.check-call-animation {
  @include animation-name(check-call);
}


// base.scss
@mixin animation($shorthand) {
  -o-animation: $shorthand;
  -moz-animation: $shorthand;
  -webkit-animation: $shorthand;
  animation: $shorthand;
}

@mixin animation-iteration-count($duration) {
  -moz-animation-iteration-count: $duration;
  -webkit-animation-iteration-count: $duration;
  animation-iteration-count: $duration;
}

@mixin animation-name($name) {
  -moz-animation-name: $name;
  -webkit-animation-name: $name;
  animation-name: $name;
}

@mixin animation-duration($duration) {
  -moz-animation-duration: $duration;
  -webkit-animation-duration: $duration;
  animation-duration: $duration;
}

@mixin animation-timing-function($type) {
  -moz-animation-timing-function: $type;
  -webkit-animation-duration: $type;
  animation-duration: $type;
}

@mixin user-select($type) {
  -webkit-user-select: $type;
  -moz-user-select: $type;
  -ms-user-select: $type;
  user-select: $type;
}

@mixin fill-mode($mode) {
  -moz-fill-mode: $mode;
  -webkit-fill-mode: $mode;
  fill-mode: $mode;
}

@mixin animation-fill-mode($mode) {
  -moz-animation-fill-mode: $mode;
  -webkit-animation-fill-mode: $mode;
  animation-fill-mode: $mode;
}

@mixin animation-direction($direction) {
  -moz-animation-direction: $direction;
  -webkit-animation-direction: $direction;
  animation-direction: $direction;
}

@mixin keyframes($name) {
  @-webkit-keyframes $name {
      @content;
     }

  @-moz-keyframes $name {
      @content;
     }

  @-o-keyframes $name {
      @content;
     }

  @keyframes $name {
      @content;
     }
}