Android webkit 上的 CSS3 动画问题 -iteration-count 和“forwards”不要停止动画

发布于 2024-12-11 20:35:37 字数 918 浏览 0 评论 0原文

我正在使用一些 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 上遇到过类似的问题吗？请帮忙。谢谢

原文

I'm using some CSS3 2D transforms to animate a menu for an Android specific web app.

I'm inserting the animation parameters using Javascript as they only apply after an ontouchstart function is triggered.

Heres the javascript for the first part of the animation as an example:

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";
        }

Heres the CSS3 for the slide1 animation:

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

This code displays the animation correctly however once each state of the animation is completed it then disappears. From what i have read, this should be resolved by using -webkit-animation-fill-mode:forwards or -webkit-animation-iteration-count:1 but neither of these seem to stop/pause the animation after its played.

Has anyone else encountered a similar issue with Android? Please help. Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

许久 2024-12-18 20:35:37

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

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

just add this to your CSS. Android doesn't like it to be nested or shorthand. I tried this and It worked fine for me and this is how I do all my webKit animation.

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

回复收藏 0 原文