CSS3旋轉動畫在Iphone上不起作用

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

我檢查了類似的問題，並嘗試使用0%和100%來代替from和to ，並一次旋轉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); }
}

對其他關鍵幀重復此操作，這應該可以解決一個或兩個問題。