クリック時のアイコンの色

Question

商品カードに追加されるアイコンで「好き」の機能を作成しました。

アイコンをクリックすると赤くなる必要がありますが、同時にアニメーションも表示する必要があります。

見た目では、それらは互いに重なっており、他のものを取り消しています。

.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

これを試してみてください：

/* 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>