CSS3 动画迭代计数 1 与无限 chrome 兼容性答案

【问题标题】：CSS3 animation iteration count 1 vs infinite chrome compatibilityCSS3 动画迭代计数 1 与无限 chrome 兼容性
【发布时间】：2015-03-23 20:04:36
【问题描述】：

好的。我试图搜索这个问题。这很简单。我有一个 css swing 动画在 Firefox 中运行良好，但在 chrome 中运行良好。当然，我添加了 webkit 前缀。但仍然没有运气。我将迭代计数更改为无限，最后它正在工作，但不，我不希望它无限运行。这真的是一个错误吗？有人找到解决方案吗？这是我在 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);
    }
}

&lt;div class="x"&gt;&lt;/div&gt;

【问题讨论】：

它在 Firefox 中的工作方式与我在 Chrome 中的工作方式相同。
感谢您提供的信息。我会尝试重新安装我的 chrome。
我刚刚尝试重新安装两次。它仍然无法正常工作..您认为问题出在哪里？
您看到的具体差异是什么？您使用的是最新的浏览器版本吗？ Firefox 35 和 Chrome 40？
是的 chrome 版本 40.0.2214.91 .. div 没有移动或其他任何东西，但在 Firefox 中它工作正常。

标签： css google-chrome css-animations

【解决方案1】：

我刚才遇到了这个问题。对我来说，动画似乎发生在很短的时间内，而且很多时候人眼无法察觉；即当 webkit-animation-iteration-count 不是无限时，Chrome 不尊重动画持续时间参数。

对我来说，这似乎不是一个随机错误。它具有可靠的重现性。

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

【讨论】：

你也在微软windows中使用chrome吗？因为我在 ubuntu 中使用 chrome 尝试了这个测试，即使是 w3schools 中的那些例子，一切都很顺利。
所以基本上在使用 CSS 动画时也必须考虑到这一点。只是说。

【解决方案2】：

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

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

【讨论】：