首页 > css3 keyframes 旋转 bug

css3 keyframes 旋转 bug

对于keyframes旋转我做了个几个测试
测试1:

@keyframes  rotateClockZoomIn
    {
        0%{
            -webkit-transform:rotate3d(0,0,1,-360deg);
            transform:rotate3d(0,0,1,-360deg);
        }
        100%{
            -webkit-transform:rotate3d(0,0,1,0deg);
            transform:rotate3d(0,0,1,0deg);
        }
    }
    

测试2:

        @keyframes  rotateClockZoomIn
    {
        0%{
            -webkit-transform:rotate3d(0,0,1,-360deg);
            transform:rotate3d(0,0,1,-360deg);
        }
        100%{
            -webkit-transform:rotate3d(0,0,1,1deg);
            transform:rotate3d(0,0,1,1deg);
        }
    }
    

上面两个测试代码在手机上不会执行旋转,可能是360的整数倍(接近也算)导致的,请问谁有比较好的解决方案吗?


使用 @keyframes 在最新的移动浏览器上虽然不用使用 @-webkit-keyframes,不过在次高级的版本中还是需要加这个前缀的。比如 Android Browser 在最新的 4.4 中移除了 -webkit 前缀,而在当前流行的版本 4.4.4 中却还是需要 -webkit 前缀。

可以参考 http://caniuse.com/#search=keyframes

【热门文章】
【热门文章】