Webkit CSS动画跳跃问题

Question

我有一个由两个旋转方块组成的动画，较小的方块在较大的方块内部。它使用JS添加类来进行动画、暂停和继续播放。

在Webkit中，我遇到的问题是在mouseout时，它会添加一个暂停类并暂停CSS动画，动画会跳回其初始状态。有时它会跳得好像动画从未暂停过。我尝试了animation-fill以及添加最终动画状态，但所有我搜索和尝试的方法都似乎没有帮助。

感谢任何帮助。

完整代码在这里： 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;
}

- user2545662

Answer 1

添加...

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

...到你正在转换的任何东西。根据这份文档在这里应该可以工作...

- Millhorn