CSS3动画不会在Android 4.2工作 [英] CSS3 animation does not work on Android 4.2
问题描述
我用工作灯，我需要使用CSS来把一个小动画形象开发的应用程序。在与Android版本的设备测试4.4的作品完美，我进行了设备上的一些测试与Android 4.2和4.1，这同样的动画不起作用。 IPhone 5的正常使用。
I'm developing an app using Worklight where I need to put a small animated image using CSS. In tests on Android devices with version 4.4 works perfectly, I performed some tests on devices with Android 4.2 and 4.1 and this same animation does not work. IPhone 5 is working perfectly.
我的code是：
<html>
<style type="text/css">
.image-arrow {
content: url("http://i104.photobucket.com/albums/m163/bl82/arrowup-green.png");
/* content: url("hand.png"); */
/* display: inline-block; */
width: 100px;
text-align: center;
margin: auto;
overflow: visible;
/* position: absolute; */
}
.element-animation{
-webkit-animation: 4.0s ease-in-out;
-webkit-animation-name: animationFramesWebKit;
-webkit-animation-iteration-count: 2;
-webkit-transform-origin: 60% 100%;
}
@-webkit-keyframes animationFramesWebKit {
0% {
-webkit-transform: rotate(0deg);
}
8% {
-webkit-transform: rotate(0deg);
}
18% {
-webkit-transform: rotate(-25deg) ;
}
25% {
-webkit-transform: rotate(25deg) ;
}
32% {
-webkit-transform: rotate(-25deg) ;
}
41% {
-webkit-transform: rotate(25deg) ;
}
50% {
-webkit-transform: rotate(-25deg) ;
}
61% {
-webkit-transform: rotate(25deg) ;
}
70% {
-webkit-transform: rotate(-25deg) ;
}
85% {
-webkit-transform: rotate(25deg) ;
}
100% {
-webkit-transform: rotate(0deg);
}
}
</style>
<body>
<div class="top-body image-arrow element-animation"></div>
</body>
</html>
如果我创建这个HTML和开放在Android 4.2不工作的文件，但在Android 4.4完美。 任何想法的Android 4.2，下不支持，如果有任何其他的吗？
If I create a file with this HTML and open on Android 4.2 does not work, but on Android 4.4 works perfectly. Any idea what Android 4.2 and lower does not support and if there is any alternative for this?
推荐答案
过去的Webkit版本有困难的渲染动画伪元素，如：在和：之前。在你的情况下，在图像配箭头类有内容：属性，它通常是伪元素保留使用只要。我建议你将其替换为背景图像，对于如：
Past versions of Webkit has trouble rendering animation for pseudo elements, such as :after and :before. In your case, the .image-arrow class has the content: property which is generally reserved for use in pseudo elements only. I suggest you replace it with background-image, for eg:
.image-arrow {
background-image: url("http://i104.photobucket.com/albums/m163/bl82/arrowup-green.png");
/* content: url("hand.png"); */
/* display: inline-block; */
width: 100px;
text-align: center;
margin: auto;
overflow: visible;
/* position: absolute; */
}
这与Webkit的问题（现在的解决）是有据可查的： http://trac.webkit.org/changeset/138632
This problem (now solved) with Webkit is well documented: http://trac.webkit.org/changeset/138632
Chrome浏览器的PC实现了这个版本的26后的iOS 6.1后，和Android 4.4上。
Chrome PC implemented this after version 26, iOS after 6.1, and Android on 4.4.
这篇关于CSS3动画不会在Android 4.2工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
