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

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/

它不起作用！ 为什么呢 也许是野生动物园的虫子？

Answer 2

由于浏览器不支持它，因此对其进行测试很简单-我们只需要使用getComputedStyle检查解析的样式是什么

只需添加如下内容

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

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

注意：这假定支持getComputedStyle和querySelector，因此您可能还需要检查这些内容。

至于为什么它不起作用，我将大笔赌注原始图像太大而无法进行野生动物园