$s : 18px;
$w : 7px;
$red: #E53935; 
$grey: #BDBDBD;
$bg: #FFEBEE;
$time: 4s;

@mixin animation($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }
    @-moz-keyframes #{$name} {
        @content;
    }
    @-o-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
}

@mixin heart($color){
    box-shadow:
       $s*0 0 0 $w $color,
       $s*1 0 0 $w $color,
       $s*2 0 0 $w $color,
       $s*6 0 0 $w $color,
       
       $s*(-1)  $s*1 0 $w $color,
       $s*0  $s*1 0 $w $color,
       $s*1  $s*1 0 $w $color,
       $s*2  $s*1 0 $w $color,
       $s*3  $s*1 0 $w $color,
       $s*5  $s*1 0 $w $color,
       $s*6  $s*1 0 $w $color,
       $s*7  $s*1 0 $w $color,
       $s*9  $s*1 0 $w $color,
       
       $s*(-1)  $s*2 0 $w $color,
       $s*0  $s*2 0 $w $color,
       $s*1  $s*2 0 $w $color,
       $s*2  $s*2 0 $w $color,
       $s*3  $s*2 0 $w $color,
       $s*4  $s*2 0 $w $color,
       $s*5  $s*2 0 $w $color,
       $s*6  $s*2 0 $w $color,
       $s*7  $s*2 0 $w $color,
       $s*9  $s*2 0 $w $color,
       
       $s*(-1)  $s*3 0 $w $color,
       $s*0  $s*3 0 $w $color,
       $s*1  $s*3 0 $w $color,
       $s*2  $s*3 0 $w $color,
       $s*3  $s*3 0 $w $color,
       $s*4  $s*3 0 $w $color,
       $s*5  $s*3 0 $w $color,
       $s*6  $s*3 0 $w $color,
       $s*7  $s*3 0 $w $color,
       $s*8  $s*3 0 $w $color,
       $s*9  $s*3 0 $w $color,
       
       $s*0  $s*4 0 $w $color,
       $s*1  $s*4 0 $w $color,
       $s*2  $s*4 0 $w $color,
       $s*3  $s*4 0 $w $color,
       $s*4  $s*4 0 $w $color,
       $s*5  $s*4 0 $w $color,
       $s*6  $s*4 0 $w $color,
       $s*7  $s*4 0 $w $color,
       $s*8  $s*4 0 $w $color,
       
       $s*1  $s*5 0 $w $color,
       $s*2  $s*5 0 $w $color,
       $s*3  $s*5 0 $w $color,
       $s*4  $s*5 0 $w $color,
       $s*5  $s*5 0 $w $color,
       $s*6  $s*5 0 $w $color,
       $s*7  $s*5 0 $w $color,
       
       $s*2  $s*6 0 $w $color,
       $s*3  $s*6 0 $w $color,
       $s*4  $s*6 0 $w $color,
       $s*5  $s*6 0 $w $color,
       $s*6  $s*6 0 $w $color,
       
       $s*3  $s*7 0 $w $color,
       $s*4  $s*7 0 $w $color,
       $s*5  $s*7 0 $w $color,
       
       $s*4  $s*8 0 $w $color;
}

@include animation(complete) {
  0%,24%{
    box-shadow:
       $s*7 $s*(-4) 0 $w $red,
       $s*8 $s*(-4) 0 $w $red,
       $s*8  $s*(-3) 0 $w $red,
       $s*8  $s*(-2) 0 $w $red;
  }
  25%,49%{
    box-shadow:
       $s*7 $s*(-3) 0 $w $red,
       $s*8 $s*(-3) 0 $w $red,
       $s*8  $s*(-2) 0 $w $red,
       $s*8  $s*(-1) 0 $w $red;
  }
   50%,74%{
    box-shadow:
       $s*7 $s*(-2) 0 $w $red,
       $s*8 $s*(-2) 0 $w $red,
       $s*8  $s*(-1) 0 $w $red,
       $s*8  $s*0 0 $w $red;
  }
   75%,99%{
    box-shadow:
       $s*7 $s*(-1) 0 $w $red,
       $s*8 $s*(-1) 0 $w $red,
       $s*8  $s*0 0 $w $red,
       $s*8  $s*1 0 $w $red;
  }
  100%{
    box-shadow:
       $s*7 $s*0 0 $w $red,
       $s*8 $s*0 0 $w $red,
       $s*8  $s*1 0 $w $red,
       $s*8  $s*2 0 $w $red;
  }
}

@include animation(grey){
  0%,90%{
     @include heart($grey);
  }
}

body{
  background: $bg;
  overflow: hidden;
  
  .heart{
     position: absolute;
     left: 50%;
     top: 50%;
     margin-left: -71px;
     margin-top: -50px;
     @include heart($red);
    -webkit-animation: grey $time + 1 linear;
    -moz-animation: grey  $time + 1 linear;
    -o-animation: grey  $time + 1 linear;
     animation: grey $time + 1 linear;
    
    .part{
     position: absolute;
     left: 50%;
     top: 50%;
     box-shadow:
       $s*7 $s*0 0 $w $red,
       $s*8 $s*0 0 $w $red,
       $s*8  $s*1 0 $w $red,
       $s*8  $s*2 0 $w $red;
    -webkit-animation: complete $time linear;
    -moz-animation: complete $time linear;
    -o-animation: complete $time linear;
     animation: complete $time linear;
    }
  }
}