Android/HTML5/CSS3 淡入问题

Question

我遇到了有关 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;

Answer 1

显然 webkit-animation-fill-mode 不适用于 Android。 您可能需要通过获取动画的最后样式并将其应用于动画结束来使用 javascript 进行变通。