CSS3旋转动画在Iphone上不起作用 [英] CSS3 Spinning Animation doesn't work on Iphone

问题描述

有人能告诉我为什么在我的Iphone上测试此CSS3动画后无法正常工作吗？在Chrome上运行正常。

Can anybody tell why this CSS3 Animation refuses to work when I test it on my Iphone? It works fine on Chrome.

    .heartbeat:after {
        content: "\f118";
        font-family: fontAwesome;
        font-size: 50px;
        color: rgb(0, 156, 255);
        -webkit-animation: spin 1000ms ease 0s infinite normal;
        -moz-animation: spin 1000ms ease 0s infinite normal;
        -ms-animation: spin 1000ms ease 0s infinite normal;
        -o-animation: spin 1000ms ease 0s infinite normal;
        animation: spin 1000ms ease 0s infinite normal;
    }

    @-ms-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @-moz-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @-webkit-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }

我检查了类似的问题，并试图从中替换 和到，其中 0％和 100％，并一次旋转180度，请改用rotate3d；没用。

I checked similar questions and tried to replace from and to with 0% and 100%, and rotate 180 degrees at a time, use rotate3d instead; didnt work.

推荐答案

这背后有一个原因。您在这里遇到错误：

There is a reason behind this. You have an error here:

  @-ms-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @-moz-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @-webkit-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }

---

请注意此处的任何内容，

---

Notice anything here, for example?

@-moz-keyframes spin { 
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

您使用的是 -moz- 关键帧，这很好，但是还有其他注意事项吗？

You're using a -moz- keyframe, which is fine, but notice anything else?

-webkit-

How about the -webkit- prefix on the transform?

因此，从本质上讲，它将变成：

So, in essence, this would become:

@-moz-keyframes spin { 
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}

为其他关键帧重复此操作，这应该可以解决一两个问题...

Repeat this for your other keyframes and this should sort out a problem or two...

这篇关于CSS3旋转动画在Iphone上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！