Webkit CSS 动画跳跃问题

Posted 2023-03-06

【中文标题】Webkit CSS 动画跳跃问题

【英文标题】：Webkit CSS Animation Jumping issue

【发布时间】：2013-09-15 22:10:23

【问题描述】：

我有一个动画设置有两个旋转的盒子，一个大盒子里的小盒子。它使用 JS 来添加动画、暂停和恢复的类。

在Webkit中，我遇到的问题是mouseout，它添加了一个暂停类并暂停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;

【参考方案1】：

添加...

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

...到你正在转换的任何东西。应该基于此文档工作here...