safari的bug

Safari的animation bug

前端時間我在用animation寫一個動畫頁面的時候，發如今Safari下顯示異常。

問題描述：我使用rotateY讓某一圖片元素旋轉，發如今旋轉的過程當中該元素只顯示半邊，而且它的兄弟元素都消失不見了。

animation部分代碼以下：

@keyframes spinIn {
    0% {
        left: 50%;
        -webkit-transform: rotateY(0);
        -ms-transform: rotateY(0);
        transform: rotateY(0);
        opacity: 0;
    } 30% {
        opacity: 1;
    } 50% {
        opacity: 1;
        left: 50%;
        -webkit-transform: rotateY(700deg);
        -ms-transform: rotateY(700deg);
        transform: rotateY(700deg);
    } 100% {
        opacity: 1;
        left: 140px;
        -webkit-transform: rotateY(720deg);
        -ms-transform: rotateY(720deg);
        transform: rotateY(720deg);
    }
}

一開始我想，這樣的bug應該直接在父元素上添加transform-style: preserve-3d;就能搞定了，可是我加了這個屬性以後Safari的表現仍是沒變。我又加了perspective屬性，發現仍是沒用。而後我抓頭想了半天，google也搜不出結果，我就在調試的地方不停的換屬性。先把animation去掉，而後在頁面裏面一個一個屬性的去替換修改，結果我發現我在設置了perspective屬性把transform-style屬性去掉以後問題就消失了！！！

解決辦法：把使用該animation的元素的父元素的transform-style屬性去掉，加上perspective屬性並設置適當的值（通常來講，可能須要設置的值的大小爲5000左右，固然根據實際要求這個值會有很大的變化）。這樣，Safari就能正常顯示這些動畫了。

歡迎你們有問題和我交流或者寫下您的評論~