Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        $browser: '-webkit-'; @content;
    }
    @-moz-keyframes #{$animationName} {
        $browser: '-moz-'; @content;
    }
    @-o-keyframes #{$animationName} {
        $browser: '-o-'; @content;
    }
    @keyframes #{$animationName} {
        $browser: ''; @content;
    }
} $browser: null;

@include keyframes(heart-pulse) {
  0%, 50%, 100% {
    #{$browser}transform: scale(1);
  }
  25%, 75% {
    #{$browser}transform: scale(1.2);
  }
}

@include keyframes(heart-broken-left) {
  60% {    
    #{$browser}transform: translateX(-20px) rotate(-10deg);
  }
  100% {
    #{$browser}transform: translateX(-25px) rotate(-15deg);
    opacity: 0;
  }  
}

@include keyframes(heart-broken-right) {
  60% {    
   #{$browser}transform: translateX(20px) rotate(10deg);
  }
  100% {
    #{$browser}transform: translateX(25px) rotate(15deg);
    opacity: 0;
  }  
}

SassMeister-output.css

@-webkit-keyframes heart-pulse {
  0%, 50%, 100% {
    -webkit-transform: scale(1);
  }

  25%, 75% {
    -webkit-transform: scale(1.2);
  }
}
@-moz-keyframes heart-pulse {
  0%, 50%, 100% {
    -moz-transform: scale(1);
  }

  25%, 75% {
    -moz-transform: scale(1.2);
  }
}
@-o-keyframes heart-pulse {
  0%, 50%, 100% {
    -o-transform: scale(1);
  }

  25%, 75% {
    -o-transform: scale(1.2);
  }
}
@keyframes heart-pulse {
  0%, 50%, 100% {
    transform: scale(1);
  }

  25%, 75% {
    transform: scale(1.2);
  }
}
@-webkit-keyframes heart-broken-left {
  60% {
    -webkit-transform: translateX(-20px) rotate(-10deg);
  }

  100% {
    -webkit-transform: translateX(-25px) rotate(-15deg);
    opacity: 0;
  }
}
@-moz-keyframes heart-broken-left {
  60% {
    -moz-transform: translateX(-20px) rotate(-10deg);
  }

  100% {
    -moz-transform: translateX(-25px) rotate(-15deg);
    opacity: 0;
  }
}
@-o-keyframes heart-broken-left {
  60% {
    -o-transform: translateX(-20px) rotate(-10deg);
  }

  100% {
    -o-transform: translateX(-25px) rotate(-15deg);
    opacity: 0;
  }
}
@keyframes heart-broken-left {
  60% {
    transform: translateX(-20px) rotate(-10deg);
  }

  100% {
    transform: translateX(-25px) rotate(-15deg);
    opacity: 0;
  }
}
@-webkit-keyframes heart-broken-right {
  60% {
    -webkit-transform: translateX(20px) rotate(10deg);
  }

  100% {
    -webkit-transform: translateX(25px) rotate(15deg);
    opacity: 0;
  }
}
@-moz-keyframes heart-broken-right {
  60% {
    -moz-transform: translateX(20px) rotate(10deg);
  }

  100% {
    -moz-transform: translateX(25px) rotate(15deg);
    opacity: 0;
  }
}
@-o-keyframes heart-broken-right {
  60% {
    -o-transform: translateX(20px) rotate(10deg);
  }

  100% {
    -o-transform: translateX(25px) rotate(15deg);
    opacity: 0;
  }
}
@keyframes heart-broken-right {
  60% {
    transform: translateX(20px) rotate(10deg);
  }

  100% {
    transform: translateX(25px) rotate(15deg);
    opacity: 0;
  }
}