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就能正常显示这些动画了。

欢迎你们有问题和我交流或者写下您的评论~