Question

我发现在Mac OSX版本6.1（10B141）上运行在ios simulator / xcode ios模拟器上的浏览器并没有显示我的阶梯式弯曲动画，如下所示：

通过使用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);   
    }                       
}

我也注意到，通过使用像上一个例子那样的百分比阶段来做不同的动画（但不像我想要使用和从中实现的步进动画）：

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支持，因此您可能还想检查这些。

至于为什么它不起作用，我会大肆宣传原始图像对于野生动物园来说太大了

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

2 个答案: