Android webkit 上的 CSS3 动画问题 - 迭代计数和"转发"不会停止动画

Question

我正在使用一些CSS3 2D变换来为Android特定的web应用程序动画菜单。

我使用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上遇到过类似的问题吗?请帮助。由于

Answer 1

把它添加到你的CSS中。Android不喜欢嵌套或简写。我试过了，它对我来说很好，这就是我如何做我所有的webKit动画。

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

Answer 2

您是否调查过您的动画是否返回0%阶段，例如。将初始刻度设置为0.25或更多?

同样，您可以测试所有可能的填充模式(无/向前/向后/两者)，看看它是否有效果。

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