Like Icon colour on click - html

Question

I've created a "like" feature with an icon that will be added in product card.
I need to make the icon stay red once it's been clicked, but it also needs to display the animation at the same time.
By the looks of it they're overlapping each other and ones cancelling the other out.
.heart{
font-size: 24px!important;
color: #fff;
}
/* PUSH HOVER EFFECT */
#-webkit-keyframes hvr-push {
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes hvr-push {
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.hvr-push {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
}
.hvr-push:active {
-webkit-animation-name: hvr-push;
animation-name: hvr-push;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/* CHANGE ICON ON HOVER */
.change-icon > .fa + .fa,
.change-icon:hover > .fa {
display: none;
}
.change-icon:hover > .fa + .fa {
display: inherit;
color:red;
}
<div>
<span class="change-icon">
<i class="hvr-push heart fa fa-heart-o"></i>
<i class="hvr-push heart fa fa-heart"></i>
</span>
</div>

Answer 1

Try this:
/* when a user clicks, toggle the 'is-animating' class */
$(".heart").on('click touchstart', function(){
$(this).toggleClass('is_animating');
$(this).toggleClass('liked');
});
/*when the animation is over, remove the class*/
$(".heart").on('animationend', function(){
$(this).toggleClass('is_animating');
});
.heart {
cursor: pointer;
height: 50px;
width: 50px;
background-image:url( 'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
background-position: left;
background-repeat:no-repeat;
background-size:2900%;
}
.heart:hover {
background-position:right;
}
.liked {
background-position:right;
}
.is_animating {
animation: heart-burst .8s steps(28) 1;
}
#keyframes heart-burst {
from {background-position:left;}
to { background-position:right;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="heart"></div>