{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Luminary・发光体 的问题《CSS3 animation does not work on Android 4.2》','https://www.manongdao.com/q-401429.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.
My code is:
<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>
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?
Past versions of Webkit has trouble rendering animation for pseudo elements, such as
:afterand:before. In your case, the.image-arrowclass has thecontent:property which is generally reserved for use in pseudo elements only. I suggest you replace it withbackground-image, for eg:This problem (now solved) with Webkit is well documented: http://trac.webkit.org/changeset/138632
Chrome PC implemented this after version 26, iOS after 6.1, and Android on 4.4.
Change .image-arrow to below:
In many version of WebView Android, several properties of css3 not working correctly.