我正在使用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：属性,该属性通常仅保留用于伪元素.我建议你用背景图片替换它,例如：
.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版之后实现了这一功能,在6.1之后实现了iOS,在4.4之后实现了Android.
原文地址：https://codeday.me/bug/20190728/1561599.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。