Generated by SassMeister.com.

SassMeister-input-HTML.haml

%body
  %span.heart
    %span.heart-full
    %span.heart-spot
    %span.heart-empty

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Bourbon (v4.0.2)
// ----

@import "bourbon/bourbon";

@mixin _position($position, $args) {
  @each $dir in top, left, bottom, right {
    $i: index($args, $dir);
    @if $i {
      #{$dir}: nth($args, $i + 1);
    }
  }
  position: $position;
}

@mixin absolute($args) {
  @include _position(absolute, $args);
}
@mixin relative($args) {
  @include _position(relative, $args);
}
@mixin fixed($args) {
  @include _position(fixed, $args);
}

@mixin sizing($args) {
  @if length($args) == 2 {
    width: nth($args, 1);
    height: nth($args, 2);
  }
  @else {
    width: $args;
    height: $args;
  }
}

@mixin circle($args) {
  @include sizing($args);
  border-radius: 50%;
}

/* Config */
$heart-empty-path: 'https://dl.dropboxusercontent.com/u/26679490/heart-empty.png';
$heart-full-path: 'https://dl.dropboxusercontent.com/u/26679490/heart-full.png';

*, *:before, *:after {
  box-sizing: border-box;
}

/* Animations */
@include keyframes(expandHeart) {
  0% {
    @include sizing(1px);
    @include absolute(top 50% left 50%);
  }
  50% {
    @include sizing(81px);
    @include absolute(top -3px left -3px);
  }
  51%, 100% { @include sizing(0); }
}

@include keyframes(showHeart) {
  50% {
    opacity: 1;
    @include sizing(0px);
    @include absolute(top 50% left 50%);
  }
  100% {
    opacity: 1;
    @include sizing(42px 39px);
    @include absolute(top 20px left 17px);
  }
}

@include keyframes(hideHeart) {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.heart {
  @include circle(77px);
  display: block;
  overflow: hidden;
  position: relative;
  @include transform(translate3d(0, 0, 0));
  @include backface-visibility(hidden);
  &:before {
    @include circle(100%);
    border: 3px solid white;
    content: '';
    display: block;
  }
  &:hover {
    .heart-spot { @include animation-name(expandHeart); }
    .heart-empty { @include animation-name(showHeart); }
    .heart-full { @include animation-name(hideHeart); }
  }
}

.heart-spot {
  @include circle(1px);
  @include absolute(top 50% left 50%);
  border-radius: 50%;
  background: white;
  display: block;
}

.heart-full, .heart-spot, .heart-empty {
  @include animation-duration(1s);
  @include animation-fill-mode(both);
}

.heart-full, .heart-empty {
  @include sizing(42px 39px);
  @include absolute(top 20px left 17px);
  box-sizing: content-box;
  background-image: url($heart-full-path);
  background-size: contain;
  content: '';
  display: block;
  overflow: hidden;
}

.heart-empty {
  @include circle(0);
  background-image: url($heart-empty-path);
  border: solid white 100px;
  margin: -100px;
  opacity: 0;
}

body {
  background: #000;
}

SassMeister-output.css

/* Config */
*, *:before, *:after {
  box-sizing: border-box;
}

/* Animations */
@-webkit-keyframes expandHeart {
  0% {
    width: 1px;
    height: 1px;
    top: 50%;
    left: 50%;
    position: absolute;
  }

  50% {
    width: 81px;
    height: 81px;
    top: -3px;
    left: -3px;
    position: absolute;
  }

  51%, 100% {
    width: 0;
    height: 0;
  }
}
@-moz-keyframes expandHeart {
  0% {
    width: 1px;
    height: 1px;
    top: 50%;
    left: 50%;
    position: absolute;
  }

  50% {
    width: 81px;
    height: 81px;
    top: -3px;
    left: -3px;
    position: absolute;
  }

  51%, 100% {
    width: 0;
    height: 0;
  }
}
@keyframes expandHeart {
  0% {
    width: 1px;
    height: 1px;
    top: 50%;
    left: 50%;
    position: absolute;
  }

  50% {
    width: 81px;
    height: 81px;
    top: -3px;
    left: -3px;
    position: absolute;
  }

  51%, 100% {
    width: 0;
    height: 0;
  }
}
@-webkit-keyframes showHeart {
  50% {
    opacity: 1;
    width: 0px;
    height: 0px;
    top: 50%;
    left: 50%;
    position: absolute;
  }

  100% {
    opacity: 1;
    width: 42px;
    height: 39px;
    top: 20px;
    left: 17px;
    position: absolute;
  }
}
@-moz-keyframes showHeart {
  50% {
    opacity: 1;
    width: 0px;
    height: 0px;
    top: 50%;
    left: 50%;
    position: absolute;
  }

  100% {
    opacity: 1;
    width: 42px;
    height: 39px;
    top: 20px;
    left: 17px;
    position: absolute;
  }
}
@keyframes showHeart {
  50% {
    opacity: 1;
    width: 0px;
    height: 0px;
    top: 50%;
    left: 50%;
    position: absolute;
  }

  100% {
    opacity: 1;
    width: 42px;
    height: 39px;
    top: 20px;
    left: 17px;
    position: absolute;
  }
}
@-webkit-keyframes hideHeart {
  0%, 49% {
    opacity: 1;
  }

  50%, 100% {
    opacity: 0;
  }
}
@-moz-keyframes hideHeart {
  0%, 49% {
    opacity: 1;
  }

  50%, 100% {
    opacity: 0;
  }
}
@keyframes hideHeart {
  0%, 49% {
    opacity: 1;
  }

  50%, 100% {
    opacity: 0;
  }
}
.heart {
  width: 77px;
  height: 77px;
  border-radius: 50%;
  display: block;
  overflow: hidden;
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.heart:before {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid white;
  content: '';
  display: block;
}
.heart:hover .heart-spot {
  -webkit-animation-name: expandHeart;
  -moz-animation-name: expandHeart;
  animation-name: expandHeart;
}
.heart:hover .heart-empty {
  -webkit-animation-name: showHeart;
  -moz-animation-name: showHeart;
  animation-name: showHeart;
}
.heart:hover .heart-full {
  -webkit-animation-name: hideHeart;
  -moz-animation-name: hideHeart;
  animation-name: hideHeart;
}

.heart-spot {
  width: 1px;
  height: 1px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  position: absolute;
  border-radius: 50%;
  background: white;
  display: block;
}

.heart-full, .heart-spot, .heart-empty {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

.heart-full, .heart-empty {
  width: 42px;
  height: 39px;
  top: 20px;
  left: 17px;
  position: absolute;
  box-sizing: content-box;
  background-image: url("https://dl.dropboxusercontent.com/u/26679490/heart-full.png");
  background-size: contain;
  content: '';
  display: block;
  overflow: hidden;
}

.heart-empty {
  width: 0;
  height: 0;
  border-radius: 50%;
  background-image: url("https://dl.dropboxusercontent.com/u/26679490/heart-empty.png");
  border: solid white 100px;
  margin: -100px;
  opacity: 0;
}

body {
  background: #000;
}

SassMeister-rendered.html

<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"beacon-4.newrelic.com","errorBeacon":"bam.nr-data.net","licenseKey":"44dddd5607","applicationID":"2515490","transactionName":"Jl5bQEIOCQpWFk5jXwtQQUZRTi0SXggiX1sVWFlRQiAVFhw0LmNiRQ==","queueTime":14,"applicationTime":2,"ttGuid":"","agentToken":null,"agent":"js-agent.newrelic.com/nr-476.min.js","extra":""}</script>
<script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function(t,e,n){function r(n){if(!e[n]){var o=e[n]={exports:{}};t[n][0].call(o.exports,function(e){var o=t[n][1][e];return r(o?o:e)},o,o.exports)}return e[n].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<n.length;o++)r(n[o]);return r}({QJf3ax:[function(t,e){function n(t){function e(e,n,a){t&&t(e,n,a),a||(a={});for(var c=u(e),f=c.length,s=i(a,o,r),p=0;f>p;p++)c[p].apply(s,n);return s}function a(t,e){f[t]=u(t).concat(e)}function u(t){return f[t]||[]}function c(){return n(e)}var f={};return{on:a,emit:e,create:c,listeners:u,_events:f}}function r(){return{}}var o="nr@context",i=t("gos");e.exports=n()},{gos:"7eSDFh"}],ee:[function(t,e){e.exports=t("QJf3ax")},{}],gos:[function(t,e){e.exports=t("7eSDFh")},{}],"7eSDFh":[function(t,e){function n(t,e,n){if(r.call(t,e))return t[e];var o=n();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(t,e,{value:o,writable:!0,enumerable:!1}),o}catch(i){}return t[e]=o,o}var r=Object.prototype.hasOwnProperty;e.exports=n},{}],D5DuLP:[function(t,e){function n(t,e,n){return r.listeners(t).length?r.emit(t,e,n):(o[t]||(o[t]=[]),void o[t].push(e))}var r=t("ee").create(),o={};e.exports=n,n.ee=r,r.q=o},{ee:"QJf3ax"}],handle:[function(t,e){e.exports=t("D5DuLP")},{}],XL7HBI:[function(t,e){function n(t){var e=typeof t;return!t||"object"!==e&&"function"!==e?-1:t===window?0:i(t,o,function(){return r++})}var r=1,o="nr@id",i=t("gos");e.exports=n},{gos:"7eSDFh"}],id:[function(t,e){e.exports=t("XL7HBI")},{}],loader:[function(t,e){e.exports=t("G9z0Bl")},{}],G9z0Bl:[function(t,e){function n(){var t=l.info=NREUM.info;if(t&&t.agent&&t.licenseKey&&t.applicationID&&c&&c.body){l.proto="https"===p.split(":")[0]||t.sslForHttp?"https://":"http://",a("mark",["onload",i()]);var e=c.createElement("script");e.src=l.proto+t.agent,c.body.appendChild(e)}}function r(){"complete"===c.readyState&&o()}function o(){a("mark",["domContent",i()])}function i(){return(new Date).getTime()}var a=t("handle"),u=window,c=u.document,f="addEventListener",s="attachEvent",p=(""+location).split("?")[0],l=e.exports={offset:i(),origin:p,features:{}};c[f]?(c[f]("DOMContentLoaded",o,!1),u[f]("load",n,!1)):(c[s]("onreadystatechange",r),u[s]("onload",n)),a("mark",["firstbyte",i()])},{handle:"D5DuLP"}]},{},["G9z0Bl"]);</script><body>
  <span class='heart'>
    <span class='heart-full'></span>
    <span class='heart-spot'></span>
    <span class='heart-empty'></span>
  </span>
</body>