javascript - 如何测试浏览器是否支持关键帧步进动画？

Question

我发现在 iOS 模拟器/xcode ios 模拟器上运行的浏览器在 Mac OSX 版本 6.1 (10B141) 上不显示我的阶梯曲线动画，如下:

http://jsbin.com/lebum/1/edit

通过使用 Modernizr，我可以测试 cssanimation，但事实是，以下工作正常:

.balance {
    animation-name: balance;
    -webkit-animation-name: balance;    

    animation-duration: 0.8s;   
    -webkit-animation-duration: 0.8s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes balance {
    0% {
        -webkit-transform: rotate(0deg);   
    }
    50% {
        -webkit-transform: rotate(4deg);
    }
    100% {
        -webkit-transform: rotate(0deg);   
    }                       
}

我还注意到，通过像前面的示例一样使用百分比阶段以不同方式制作动画(但不像我想使用 from 和 to 实现的步进动画):

http://jsbin.com/muyeguba/4/

• 甚至认为动画不是我想要的，它在 ios safari 上受支持。如果我能弄清楚是否支持往返，那就太棒了

我没有运行新的测试，来回更改为 0% 和 100%，但问题是一样的。屏幕上没有任何显示:

http://jsbin.com/lebum/3/

这让我相信解决此问题的唯一方法是通过使用 javascript 并检查浏览器代理来定位此浏览器？

因此，通过运行以下命令:

alert("User-agent header sent: " + navigator.userAgent);

我得到:

Mozilla/5.0 (iPad: CPU OS 6_1 like Mac OS X) AppleWebKi/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B141 Safari/8536.25

关于如何解决对此类动画缺乏支持的任何提示？

谢谢!

Answer 1

我找到了一种方法使它与其他条纹一起工作(我用百分比来做的原因是因为我需要这种响应):

http://jsbin.com/muyeguba/17/

** 这绝对适用于此条纹，但不适用于原始条纹。所以应用相同的:

http://jsbin.com/muyeguba/19/

没用!为什么 ？也许是 safari 上的错误？!