Question

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

在Webkit中，我遇到的问题是在mouseout上，它会添加一个暂停类并暂停CSS动画，动画会跳回到它的初始状态。有时它跳起来就像动画从未停顿一样。我已经尝试了动画填充并添加到最终动画状态。我搜索和尝试的所有内容似乎都没有帮助。

感谢任何帮助。

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;
}

@-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; }

Answer 1

添加...

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

......对于你正在转型的任何事情。假设基于此文档工作here ...

Webkit CSS动画跳跃问题

1 个答案: