CSS3动画在Android 4.2上不起作用

Question

CSS3动画在Android 4.2上不起作用

Tal*_*tro 3 animation android css3 cordova ibm-mobilefirst

我正在使用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>

Run Code Online (Sandbox Code Playgroud)

如果我使用此HTML创建文件并在Android 4.2上打开不起作用,但在Android 4.4上运行完美.知道Android 4.2及更低版本不支持的内容以及是否有替代方案？

Answer 1

Jam*_*ica 6

过去的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; */
}

Run Code Online (Sandbox Code Playgroud)

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

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

归档时间：	11 年前
查看次数：	4964 次
最近记录：	11 年前