Added icon heart animation

[Manuel-Suarez-Abascal]

I created an icon animation with heart which I wish to include in the library. How is the process? Sorry, first time contributing.

HTML:

<a href="#" class="hvr-icon-heart">
      Icon Heart <i class="fa fa-heart hvr-icon"></i>
</a>

CSS:

/* Icon Heart */
@-webkit-keyframes hvr-icon-heart {
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
@keyframes hvr-icon-heart {
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.hvr-icon-heart {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-icon-heart .hvr-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-icon-heart:hover .hvr-icon, .hvr-icon-push:focus .hvr-icon, .hvr-icon-heart:active .hvr-icon {
  -webkit-animation-name: hvr-icon-heart;
  animation-name: hvr-icon-heart;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

SASS:

/* Icon Heart */
@include keyframes(#{$nameSpace}-icon-heart) {
    50% {
        @include prefixed(transform, scale(1.5));
    }
}

@mixin icon-heart {
    @include hacks();
    @include prefixed(transition-duration, $slowDuration);

    .hvr-icon {
        @include prefixed(transform, translateZ(0));
        @include prefixed(transition-duration, $slowDuration);
        @include prefixed(transition-property, transform);
        @include prefixed(transition-timing-function, ease-out);
    }

    &:hover,
    &:focus,
    &:active {

        .hvr-icon {
            @include prefixed(animation-name, #{$nameSpace}-icon-heart);
            @include prefixed(animation-duration, $slowDuration);
            @include prefixed(animation-timing-function, linear);
            @include prefixed(animation-iteration-count, infinite);
        }
    }
}

LESS:

/* Icon Heart */
.keyframes(~"@{nameSpace}-icon-heart", {
    50% {
        .prefixed(transform, scale(1.5));
    }
});

.icon-heart() {
    .hacks();
    .prefixed(transition-duration, @slowDuration);

    .hvr-icon {
        .prefixed(transform, translateZ(0));
        .prefixed(transition-duration, @slowDuration);
        .prefixed(transition-property, transform);
        .prefixed(transition-timing-function, ease-out);
    }

    &:hover,
    &:focus,
    &:active {

        .hvr-icon {
            .prefixed(animation-name, ~"@{nameSpace}-icon-heart");
            .prefixed(animation-duration, @slowDuration);
            .prefixed(animation-timing-function, linear);
            .prefixed(animation-iteration-count, infinite);
        }
    }
}