CSS3动画在Android 4.2上不起作用

2019-07-28 12:24:19 阅读：304 来源： 互联网

标签：ibm-mobilefirst android css3 animation cordova

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS3动画在Android 4.2上不起作用