CSS3 旋转动画不适用于 Iphone

Question

有人能告诉我为什么这个 CSS3 动画在我的 Iphone 上测试时拒绝工作吗？它在 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); }
    }

我查了类似的问题，尝试把from和to换成0%和100%，一次旋转180度，改用rotate3d；没用。

Answer 1

这背后是有原因的。你这里有错误：

  @-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); }
    }

例如，注意到这里有什么吗？

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

您正在使用 -moz- 关键帧，这没问题，但注意到其他问题了吗？

转换上的 -webkit- 前缀怎么样？

所以，从本质上讲，这将变成：

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

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

CSS3 旋转动画不适用于 Iphone

CSS3 Spinning Animation doesn't work on Iphone

css

iphone

animation

ios