CSS3动画在Android 4.2上不起作用_Android_Css_Animation_Cordova_Ibm Mobilefirst

CSS3动画在Android 4.2上不起作用

android css animation cordova ibm-mobilefirst

CSS3动画在Android 4.2上不起作用,android,css,animation,cordova,ibm-mobilefirst,Android,Css,Animation,Cordova,Ibm Mobilefirst,我正在使用Worklight开发一个应用程序，我需要使用CSS放置一个小的动画图像。在4.4版Android设备的测试中，我在4.2和4.1版Android设备上进行了一些测试，但同样的动画不起作用。iPhone5工作得很好我的代码是： <html> <style type="text/css"> .image-arrow { content: url("http://i104.photobucket.com/albums

我正在使用Worklight开发一个应用程序，我需要使用CSS放置一个小的动画图像。在4.4版Android设备的测试中，我在4.2和4.1版Android设备上进行了一些测试，但同样的动画不起作用。iPhone5工作得很好

我的代码是：

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


.图像箭头{
内容：url（“http://i104.photobucket.com/albums/m163/bl82/arrowup-green.png");
/*内容：url（“hand.png”）*/
/*显示：内联块*/
宽度：100px；
文本对齐：居中；
保证金：自动；
溢出：可见；
/*位置：绝对位置*/
}
.元素动画{
-webkit动画：4.0易入易出；
-webkit动画名称：animationFramesWebKit；
-webkit动画迭代次数：2次；
-webkit转换来源：60%100%；
}
@-webkit关键帧动画框架webkit{
0% {
-webkit变换：旋转（0度）；
}
8% {
-webkit变换：旋转（0度）；
}
18% {
-webkit变换：旋转（-25度）；
}
25% {
-webkit变换：旋转（25度）；
}
32% {
-webkit变换：旋转（-25度）；
}
41% {
-webkit变换：旋转（25度）；
}
50% {
-webkit变换：旋转（-25度）；
}
61% {
-webkit变换：旋转（25度）；
}
70% {
-webkit变换：旋转（-25度）；
}
85% {
-webkit变换：旋转（25度）；
}
100% {
-webkit变换：旋转（0度）；
}
}

如果我用这个HTML创建一个文件并在安卓4.2上打开，这是行不通的，但在安卓4.4上却可以完美地工作。

是否知道安卓4.2及更低版本不支持什么，以及是否有其他替代方案？

更改。如下图所示：

   .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的几个属性无法正常工作。

以前版本的Webkit无法为伪元素渲染动画，例如

：after

和

：before

。在您的例子中，

.image arrow

类具有

内容：

属性，该属性通常仅保留在伪元素中使用。我建议您将其替换为背景图像，例如：

.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的这个问题（现在已经解决）有很好的文档记录：

Chrome PC在26版之后、iOS 6.1版之后和Android 4.4版之后都实现了这一功能。

您使用什么浏览器在手机上测试这一功能？我将此代码保存在html文件中，并使用html Viewer应用程序打开，但无法使用Worklight生成混合应用程序。您尝试在运行android 4.2的哪个设备上测试应用程序？运行android 4.2的三星Galaxy S4 Mini GT-I9192和运行android 4.1的三星Galaxy S3 GT-I9300