首页 > 其他分享> > CSS3动画在Android 4.2上不起作用

CSS3动画在Android 4.2上不起作用

2019-07-28 12:24:19 作者：互联网

我正在使用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及更低版本不支持的内容以及是否有替代方案？

解决方法:

过去的Webkit版本无法渲染伪元素的动画,例如：after和：before.在您的情况下,.image-arrow类具有content：属性,该属性通常仅保留用于伪元素.我建议你用背景图片替换它,例如：

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

标签：ibm-mobilefirst,android,css3,animation,cordova
来源： https://codeday.me/bug/20190728/1561599.html