Added heart animation

css/hover.css

@@ -4021,6 +4021,50 @@
   animation-iteration-count: 1;
 }
 
+/* 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;
+  color: #f31313;
+}
+
 /* CURLS */
 /* Curl Top Left */
 .hvr-curl-top-left {

index.html

@@ -194,6 +194,9 @@
 				<a href="#" class="hvr-icon-buzz-out">
 					Icon Buzz Out <i class="fa fa-lock hvr-icon"></i>
 				</a>
+				<a href="#" class="hvr-icon-heart">
+					Icon Heart <i class="fa fa-heart hvr-icon"></i>
+				</a>
 
 
 				<h2>Border Transitions</h2>

less/effects/icons/_icon-heart.less

@@ -0,0 +1,31 @@
+/* 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);
+			color: #f31313;
+		}
+	}
+}

less/hover.less

@@ -764,6 +764,13 @@
 	}
 }
 
+@import "effects/icons/_icon-heart";
+& when(@includeClasses = true) {
+	.@{nameSpace}-icon-heart {
+		.icon-heart();
+	}
+}
+
 /* CURLS */
 @import "effects/curls/_curl-top-left";
 & when(@includeClasses = true) {

scss/effects/icons/_icon-fade.scss

@@ -13,7 +13,7 @@
 	&:active {
 
 		.hvr-icon {
-			color: #0F9E5E;
+			color: #f31313;
 		}
 	}
 }

scss/effects/icons/_icon-heart.scss

@@ -0,0 +1,30 @@
+/* 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);
+		}
+	}
+}

scss/hover.scss

@@ -763,6 +763,13 @@
 	}
 }
 
+@import "effects/icons/icon-heart";
+@if $includeClasses {
+	.#{$nameSpace}-icon-heart {
+		@include icon-heart();
+	}
+}
+
 /* CURLS */
 @import "effects/curls/curl-top-left";
 @if $includeClasses {