La animación CSS3 no funciona en Android 4.2

Question

Aug 12, 2014, 08:07 PM

android ibm-mobilefirst cordova animation css3

La animación CSS3 no funciona en Android 4.2

Estoy desarrollando una aplicación usando Worklight donde necesito poner una pequeña imagen animada usando CSS. En las pruebas en dispositivos Android con la versión 4.4 funciona perfectamente, realicé algunas pruebas en dispositivos con Android 4.2 y 4.1 y esta misma animación no funciona. El iPhone 5 funciona perfectamente.

Mi código es:

<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>

Si creo un archivo con este HTML y lo abro en Android 4.2 no funciona, pero en Android 4.4 funciona perfectamente. ¿Alguna idea de qué es compatible con Android 4.2 y versiones anteriores y si hay alguna alternativa para esto?