设置在 :hover won't stop on mobile touch 上的 CSS 关键帧动画

Question

我已经设置了一个 CSS 关键帧动画，该动画设置为发生在 :hover 用作收藏按钮的特定图标上。它在桌面上工作得很好，但为 :hover 状态设置的动画关键帧不会在移动设备触摸时停止。如何让它停止移动或不参与移动？

这是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') 之前:悬停:

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

我不使用 javascript 电话检测所以尝试询问谷歌，有很多可能性，如 http://detectmobilebrowsers.com/ , https://www.abeautifulsite.net/detecting-mobile-devices-with-javascript/或许多其他人。

或者使用媒体查询来检测较小的设备并包装 &:hover{some_style}:

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