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

Question

我发现在Mac OSX版本6.1（10B141）上的iOS模拟器/Xcode iOS模拟器上运行的浏览器不显示我的阶梯式弯曲动画，如下：

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 上的错误？！

Answer 2

由于浏览器不支持它，因此测试它很简单 - 我们只需要使用 getCompulatedStyle

检查解析的样式是什么

只需添加如下内容

var styles = getComputedStyle(document.querySelector('.animate'));
var itWorks = !!(styles.animation || styles.webkitAnimation)

这将检查返回的值是否不为空，因此是否被正确解析。

注意：这假设 getCompulatedStyle 和 querySelector 支持，因此您可能还需要检查这些。

至于为什么它不起作用，我敢打赌原始图像对于 safari 来说太大了