如何在 Android 浏览器中停止 CSS3 动画？

Question

我有一个 div 可以旋转：

<div class="medium animated"></div>

.medium {
position: absolute;
width: 100px;
height: 100px;
}

.animated {
animation: spin 5s linear infinite;
}

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

我希望它在我点击它时停止。我在 onClick 事件侦听器中添加了 animation-play-state: paused，除了 iOS 和 Android Browser

，它在任何地方都很好用

所以，好吧，我只想在那些浏览器中点击时停止动画，而不是暂停。所以我从 DIV 中删除了 animated class。它适用于 iOS，但不适用于 Android 浏览器。 DIV 继续旋转。

如何在 Android 浏览器中停止动画？

这里有一个例子jsfiddle

Answer 1

检查一下 — http://jsfiddle.net/sergdenisov/hpvqfut5/4/。

$('.js-start-stop').on('click', function() {
    $('.js-circle').toggleClass('circle_animated');
});

$('.js-continue-pause').on('click', function() {
    $('.js-circle').toggleClass('circle_paused');
});

.circle {
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
}

    .circle__sector {
        float: left;
        width: 10%;
        height: 100%;
        background: yellow;
    }

    .circle_animated {
        -webkit-animation: spin 5s linear infinite;
        animation: spin 5s linear infinite;
    }

    .circle_paused {
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }    
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="circle circle_animated js-circle">
    <div class="circle__sector"></div>
</div>
<button class="js-start-stop" type="button">Start/Stop</button>
<button class="js-continue-pause" type="button">Continue/Pause</button>

我在 Android Browser 4.1.2 和 iOS Safari 8.3 上测试过，可以这样说：

animation-play-state: paused 似乎是浏览器错误，因为 CSS 属性确实适用于 iOS Safari（我认为 Android 它是相似的）。我认为你无能为力。
按钮Start/Stop（动画）效果很好。

如何在 Android 浏览器中停止 CSS3 动画？

How to stop CSS3 animation in Android Browser?

javascript

css

jquery

android-browser