CSS3 анимация не работает на Android 4.2
Я разрабатываю приложение с использованием Worklight, где мне нужно поместить небольшое анимированное изображение с помощью CSS. В тестах на устройствах Android с версией 4.4 работает отлично, я выполнил некоторые тесты на устройствах с Android 4.2 и 4.1, и эта же анимация не работает. Айфон 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 и ниже не поддерживает и есть ли альтернатива для этого?