我正在使用 Worklight 开发一个应用程序，我需要在其中使用 CSS 放置一个小动画图像。在 4.4 版本的 Android 设备上测试完美运行时，我在 Android 4.2 和 4.1 的设备上进行了一些测试，但同样的动画不起作用。 iPhone 5 运行良好。
我的代码是:
<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 及更低版本不支持什么吗？是否有任何替代方案？
最佳答案
过去版本的 Webkit 无法为伪元素呈现动画，例如 :after 和 :before。在您的情况下， .image-arrow 类具有 content: 属性，该属性通常仅供伪元素使用。我建议您将其替换为 background-image，例如:
.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
Chrome PC 在版本 26 之后实现了这一点，iOS 在 6.1 之后实现了这一点，Android 在 4.4 之后实现了这一点。
关于android - CSS3 动画不适用于 Android 4.2，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25271190/