我正在使用一些 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 问题?请帮忙。谢谢
最佳答案
只需将其添加到您的 CSS 中即可。 Android 不喜欢它被嵌套或简写。我试过了,它对我来说效果很好,这就是我制作所有 webKit 动画的方式。
@-webkit-keyframes slide1 {
-webkit-transform: translateY(122px);
-webkit-transform: scaleY(1);
-webkit-animation-fill-mode: forwards;
-webkit-animation-duration: 3s;
}
关于android - Android webkit 上的 CSS3 动画问题 -iteration-count 和 'forwards' 不要停止动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7901379/