Android webkit -iteration-count 和“转发”上的 CSS3 动画问题不会停止动画答案

【问题标题】：CSS3 Animation issue on Android webkit -iteration-count and 'forwards' dont stop the animationAndroid webkit -iteration-count 和“转发”上的 CSS3 动画问题不会停止动画
【发布时间】：2011-10-26 10:22:53
【问题描述】：

我正在使用一些 CSS3 2D 转换来为特定于 Android 的网络应用程序的菜单设置动画。

我使用 Javascript 插入动画参数，因为它们仅在触发 ontouchstart 函数后应用。

以动画第一部分的javascript为例：

function d1(){
        var d1=document.getElementById('d1');
        d1.style["-webkit-animation"] = "slide1";
        d1.style["-webkit-animation-duration"] = "3s";
        d1.style["-webkit-animation-iteration-count"] = "1";
        d1.style["-webkit-animation-fill-mode"] = "forwards";
        }

这是 slide1 动画的 CSS3：

     @-webkit-keyframes slide1 {
       0%{-webkit-transform:translateY(0) scaleY(0);}
       100%{-webkit-transform:translateY(122px) scaleY(1);}
     }

此代码正确显示动画，但是一旦动画的每个状态完成，它就会消失。根据我的阅读，这应该通过使用-webkit-animation-fill-mode:forwards 或-webkit-animation-iteration-count:1 来解决，但这些似乎都不会在动画播放后停止/暂停。

还有其他人遇到过类似的 Android 问题吗？请帮忙。谢谢

【问题讨论】：

标签： android css css-transforms

【解决方案1】：

只需将其添加到您的 CSS 中。 Android 不喜欢它被嵌套或简写。我试过了，对我来说效果很好，这就是我做所有 webKit 动画的方式。

@-webkit-keyframes slide1 {
    -webkit-transform: translateY(122px);
    -webkit-transform: scaleY(1);
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-duration: 3s;
}

【讨论】：

这个问题在 Android 4 上得到了解决，但只需在单独的 -webkit-animation-fill-mode 声明中定义 forwards 就可以解决问题，无论是在代码中还是在样式表中。

【解决方案2】：

您是否调查过您的动画是否返回到 0% 阶段，例如。将初始 scaleY 设置为 0.25 等？

此外，您可以测试所有可能的填充模式（无/向前/向后/两者），看看它是否有效。

此外，建议（为了获得更好的性能）使用translate3d() 而不是 translateX/Y。

【讨论】：