css3 keyframes 旋转 bug

Question

对于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的整数倍(接近也算)导致的，请问谁有比较好的解决方案吗?

Answer 1

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

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