Android/HTML5/CSS3 淡入问题答案

【问题标题】：Android/HTML5/CSS3 Fade In issuesAndroid/HTML5/CSS3 淡入问题
【发布时间】：2011-06-10 15:15:25
【问题描述】：

我遇到了有关 Android 浏览器的问题。不是一个 Android 应用程序，而是一个常规的 HTML5/CSS3 网页，涉及基于 webkit 的 CSS3 动画。很简单，我只想要一个 div/section 在屏幕上淡入。我在下面展示的方法适用于 iOS 浏览器，但不适用于 Android 浏览器。这里发生的是淡入确实发生，然后对象消失而不是粘在屏幕上：

section {
width: 480px;
height: 100px;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
background-image: url(images/home/bkg.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
z-index: 1;
-o-animation-name: fadeIn;
-o-animation-duration: 1s;
-o-animation-delay: 0s;
    -o-animation-fill-mode: both;
-moz-animation-name: fadeIn;
-moz-animation-duration: 1s;
-moz-animation-delay: 0s;
    -moz-animation-fill-mode: both;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 0s;
    -webkit-animation-fill-mode: both;

}

【问题讨论】：

请发布您的 @keyframe 定义为 fadeIn 和您想要动画的
的 HTML。

标签： android browser html webkit css

【解决方案1】：

显然 webkit-animation-fill-mode 在 Android 上不起作用。您可能需要通过获取动画的最后一个样式并将其应用到动画结束来在 javascript 中解决问题。

【讨论】：