设置为 :hover 的 CSS 关键帧动画不会在移动触摸上停止答案

【问题标题】：CSS keyframe animation which is set on :hover won't stop on mobile touch设置为 :hover 的 CSS 关键帧动画不会在移动触摸上停止
【发布时间】：2016-06-15 02:59:23
【问题描述】：

我已经设置了一个 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');
});

【问题讨论】：

请定义悬停在移动设备上。

标签： css mobile touch css-animations keyframe

【解决方案1】：

如果您触摸触摸屏上的按钮，它将一直处于悬停状态，直到您触摸其他任何位置，因此动画不会结束。

您可以尝试使用 javascript 检测移动设备，例如为按钮设置 no-hover 类，并在 css 中将 :not('no-hover') 放在 :hover 之前：

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

我不使用 javascript 电话检测，所以请尝试询问 google，有很多可能性，例如 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;
    }
}

【讨论】：