可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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?

回答1:

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.

回答2:

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.