animation-play-state:paused 暂停动画ios无效

Question

ios11的系统，微信里和浏览器不行，动画开始就不能暂停，在电脑或是qq里测没发现问题

            <div className="c-Random-started" onClick={this.randomVisible} style={this.state.clickonthe ? {
                AnimationPlayState: 'running',
                WebkitAnimationPlayState: 'running',
            } : {
                    AnimationPlayState: 'paused',
                    WebkitAnimationPlayState: 'paused',
                }}>
                <div className="c-Random-dot"></div>
            </div>

css:
.c-Random .c-Random-started{
    width: 2.5rem;
    height: 2.5rem;
    border:0.03rem solid $mainColor;
    border-radius: 50%;
    position: absolute;
    bottom: 30%;
    left: 50%;
    margin-left: -1.25rem;
    margin-bottom: 0.8rem;
    box-shadow: 0 0 0.03rem 0.02rem $mainColor;
    animation: rotate  2.5s infinite linear;
    -webkit-animation: rotate  2.5s infinite linear;
    -moz-animation: rotate  2.5s infinite linear;
    -ms-animation: rotate  2.5s infinite linear;
    -o-animation: rotate  2.5s infinite linear;
    transition: all 2.5s;
    -webkit-transition: all 2.5s;
    -moz-transition: all 2.5s;
    -ms-transition: all 2.5s;
    -o-transition: all 2.5s;
}
@keyframes rotate  {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}
                          

Answer 1

ios不支持，安卓支持。换种写法吧。