設置的CSS關鍵幀動畫：hover不會在移動觸摸上停止

Question

我有一個CSS關鍵幀動畫設置發生在：用作收藏夾按鈕的特定圖標的懸停。它在桌面上運行得很好，但爲懸停狀態設置的動畫關鍵幀不會因移動設備觸摸而停止。如何讓它停止移動或不參與移動？

這裏給codepen鏈接：

http://codepen.io/mapk/pen/ZOQqaQ 

HTML：

<div class="fav-btn"> 
    <span href="" class="favme dashicons dashicons-heart"></span> 
</div> 

CSS：

.fav-btn { 
    display:flex; 
    height: 100%; 
    justify-content: center; 
    align-items: center; 
} 


@keyframes favme-anime { 
    0% { 
     opacity: 1; 
     font-size: ms(0); 
     -webkit-text-stroke-color: transparent; 
    } 
    25% { 
     opacity:.6; 
     color: #FFF; 
     font-size: ms(-2); 
     -webkit-text-stroke-width: 1px; 
    -webkit-text-stroke-color: #DC3232; 
    } 
    75% { 
     opacity:.6; 
     color: #FFF; 
     font-size: ms(3); 
     -webkit-text-stroke-width: 1px; 
    -webkit-text-stroke-color: #DC3232; 
    } 
    100% { 
     opacity: 1; 
     font-size: ms(2); 
     -webkit-text-stroke-color: transparent; 
    } 
} 

@keyframes favme-hover { 
    from { 
     font-size: ms(3); 
    } 
    80% { 
     font-size: ms(2); 
    } 
} 

.favme { 
    display:block; 
    font-size: ms(2); 
    width: auto; 
    height: auto; 
    cursor: pointer; 
    box-shadow: none; 
    transition: all .2s ease; 
    color: #CBCDCE; 
    margin: 0; 

    &.active { 
     color: #DC3232; 
    } 
    &:hover { 
     animation: favme-hover .3s infinite alternate; 
    } 
    &.is_animating { 
     animation: favme-anime .3s; 
    } 
} 

的jQuery：

// Favorite Button - Heart 
$('.favme').click(function() { 
    $(this).toggleClass('active'); 
}); 

/* when a user clicks, toggle the 'is-animating' class */ 
$(".favme").on('click touchstart', function(){ 
    $(this).toggleClass('is_animating'); 
}); 

/*when the animation is over, remove the class*/ 
$(".favme").on('animationend', function(){ 
    $(this).toggleClass('is_animating'); 
}); 

Answer 1

如果不觸摸觸摸屏上的按鈕，它將保持懸停狀態，直到您在其他地方觸摸，因此動畫不會結束。

您可以嘗試檢測移動設備使用JavaScript和例如設置no-hover類的按鈕，並在CSS把:not('no-hover')前:hover：

&:not('no-hover'):hover { 
    animation: favme-hover .3s infinite alternate; 
} 

我不使用JavaScript的手機檢測，以便你可以試着問谷歌，有許多可能性，如http://detectmobilebrowsers.com/，https://www.abeautifulsite.net/detecting-mobile-devices-with-javascript/或許多其他。

或使用媒體查詢探測更小的設備和wrapp的&:hover{some_style}：

@media (min-width: 600px) { 
    &:hover { 
     animation: favme-hover .3s infinite alternate; 
    } 
}