css3动画在android2.3老版本上的问题

huizhi167 发布于 2014/04/09 16:35
阅读 1K+
收藏 0
页面代码如下:
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  #test{
          width:300px;
          height:300px;
          margin:0 auto;
          background-color:#000;
          position:relative;
  }
@-webkit-keyframes scale_box{
        0%{-webkit-transform: scale(1);}
        100%{-webkit-transform: scale(1.8);}        
}
.machine_scale_animation{
        -webkit-transform:scale(1.8);
        -webkit-animation: scale_box 1s ease-out;
}

#rotate_box{
        width:100px;
        height:50px;
        position:absolute;
        bottom:0;
        right:0;
        left:0;
        margin:auto;
        background-color:yellow;
}
.animation_rotate{
        -webkit-transform:rotate(90deg);
        -webkit-transition:-webkit-transform 2s linear;
}
  </style>
</head>
<body>
  <div id="test">  
        <div id="rotate_box"></div>
  </div>                                                                                                                                                                                                                                                                   
  <script type="text/javascript" src="../gmu/js/zepto.js"></script>
        <script type="text/javascript">
        function rotate_start(){
                $('#rotate_box').addClass('animation_rotate');        
        }
        $(function(){
                window.setTimeout(function(){
                        $('#test').addClass('machine_scale_animation');
                },1500);

                $('#test')[0].addEventListener('webkitAnimationEnd', rotate_start, false);
        });
        </script>
</body>
</html>

做完scale动画后,紧接着做rotate动画,在安卓2.3及其以下版本的机子上,做rotate动画的过程中,$('#test')会恢复到做动画之前的大小,即恢复到第一帧(0%)的状态,等rotate动画做完之后,$('#test')又变到第二帧(100%)的状态。PS:正常情况下应该是$('#test')做完scale动画后,一直停留在第二帧时的状态,rotate动画是在scale(1.8)上做的动画。

这个问题如何解决啊,请教各位高手前辈们。

加载中
0
whq731
whq731

Scaling transforms in Android 2.3 fails to scale element background images

返回顶部
顶部