Question

确定。我试图搜索这个问题。这很简单。我有一个css swing动画在firefox中工作得很好，但在chrome中却没有。当然，我添加了webkit前缀。但仍然没有运气。我将迭代计数更改为无限，最后它正在工作，但不，我不希望它无限运行。这真的是个bug吗？有人找到解决方案吗？这是我在jsfiddle中创建的代码的链接.. http://jsfiddle.net/7t1uvyup/2/这里是实际的代码。

.x{
    height:50px;
    width:50px;
    background:#000;
    position:fixed;
}
.x:hover
{
        -webkit-animation: swing 1s ease;
        animation: swing 1s ease;
       /* change webkit iteration count to infinite and it will work on chrome but of course with infinite animation */
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

<div class="x"></div>

Answer 1

我做了一些研究.. CSS是硬件加速的..

所以这不仅仅是一个奇怪的随机错误。

Answer 2

我刚才遇到了这个问题。对我而言，动画似乎是在非常短的时间内发生的，而且很多时候人类的眼睛并不明显;例如，当webkit-animation-iteration-count不是无限时，Chrome不会尊重动画持续时间参数。

对我而言，它似乎不是一个随机的错误。它可靠地重现。

尝试使用不同的浏览器访问http://www.w3schools.com/css/css3_animations.asp。 Chrome表现最差; CSS3动画框不动画;它只是留下来。

CSS3动画迭代计数1对无限铬兼容性

2 个答案: