jquery - Webkit CSS アニメーションのジャンプの問題

Question

大きなボックス内の小さなボックスの 2 つの回転ボックスでアニメーションを設定しています。JS を使用して、アニメーション、一時停止、および再開するクラスを追加します。

Webkit で発生している問題は、一時停止クラスを追加して CSS アニメーションを一時停止するマウスアウトにあり、アニメーションは初期状態に戻ります。アニメーションが一時停止していないかのようにジャンプすることがあります。私はアニメーションを塗りつぶして、アニメーションの終了状態に追加しようとしました。私が検索して試したことはすべて役に立たなかったようです。

どんな助けでも大歓迎です。

コード全体はこちら https://jsfiddle.net/qQcFy/105/

CSS アニメーション コード

@-webkit-keyframes circle {
    from {
        -webkit-transform:rotate(0deg);
    }
    to {
        -webkit-transform:rotate(360deg);
    }
}

@-webkit-keyframes inner-circle {
    from {
        -webkit-transform:rotate(0deg);
    }
    to {
        -webkit-transform:rotate(-360deg);
    }
}

#rotator.is-rotating {
    -webkit-transform:rotate(360deg);
    -webkit-animation: circle 55s linear infinite;
    -webkit-animation-fill-mode: forwards;
}

#rotator.is-rotating.is-paused {
    -webkit-animation-play-state: paused;
}

#rotator .box.is-rotating {
    -webkit-transform:rotate(-360deg);
    -webkit-animation: inner-circle 55s linear infinite;
    -webkit-animation-fill-mode: backwards;
}

#rotator .box.is-rotating.is-paused {
    -webkit-animation-play-state: paused;
}

.box {
    display: inline-block;
    overflow: hidden;
    font-size: 12px;
    border:1px solid black;
    background-color:#ccc;
    text-align:center;
}

.box-small {
    margin: 5px auto 0;
    display: block !important;
    height: 46px;
    width: 47px;
}