Question

当我在Iphone上测试时，有人能说出为什么这个CSS3动画拒绝工作吗？它适用于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上不起作用

1 个答案: