CSS3 animation does not work on Android 4.2

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 :after and :before. In your case, the .image-arrow class has the content: property which is generally reserved for use in pseudo elements only. I suggest you replace it with background-image, for eg:

.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; */
}

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:

   .image-arrow {
      background-image: url("http://i104.photobucket.com/albums/m163/bl82/arrowup-green.png");
      background-size: 100px 100px;
      /* content: url("hand.png"); */
      /* display: inline-block; */
      width: 100px;
      height: 100px;
      text-align: center;
      margin: auto;
      overflow: visible;  
      /* position: absolute; */
    }

In many version of WebView Android, several properties of css3 not working correctly.

来源：https://stackoverflow.com/questions/25271190/css3-animation-does-not-work-on-android-4-2

标签

android

css3

animation

cordova

ibm-mobilefirst