ios11 system, Wechat and browser are not good, animation cannot be paused at the beginning, and no problems are found in computer or 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);
    }
}