Question

我正在使用Worklight开发一个应用程序，我需要使用CSS放置一个小的动画图像。在版本4.4的Android设备上的测试工作完美，我在Android 4.2和4.1的设备上进行了一些测试，同样的动画不起作用。 iPhone 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及更低版本不支持的内容以及是否有替代方案？

Answer 1

过去的Webkit版本无法渲染伪元素的动画，例如:after和:before。在您的情况下，.image-arrow类具有content:属性，该属性通常仅保留用于伪元素。我建议您将其替换为background-image，例如：

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

Webkit的这个问题（现已解决）已有详细记录：http://trac.webkit.org/changeset/138632

Chrome PC在第26版之后实现了这一功能，在6.1之后实现了iOS，在4.4之后实现了Android。

Answer 2

将.image-arrow更改为以下内容：

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

在许多版本的WebView Android中，css3的几个属性无法正常工作。

CSS3动画在Android 4.2上不起作用

2 个答案: