翻轉動畫工作確定在Chrome，但不是在Safari

Question

我有以下小提琴：http://jsfiddle.net/mauricederegt/hy2dvL1u/43/

當您在瀏覽器中打開它，然後單擊該卡會翻轉和向右移動。在Chrome瀏覽器中看起來不錯，但是當我在Safari（v9）中執行此操作時，動畫有點吸吮（它具有剪輯等，點擊更快以便更好地查看混亂）

CSS的一部分（請參閱小提琴）：

/* entire container, keeps perspective */ 
.flip-container { 
    perspective: 1000; 
    transform-style: preserve-3d; 
} 
    /* UPDATED! flip the pane when .flipped class applied */ 
    .flip-container.flipped .back { 
     transform: rotateY(0deg); 
    } 
    .flip-container.flipped .front { 
     transform: rotateY(180deg); 
    } 

.flip-container, .front, .back { 
    width: 7.1428rem; 
    height: 10rem; 
} 

/* flip speed goes here */ 
.flipper { 
    transition: 200ms; 
    transform-style: preserve-3d; 

    position: relative; 
} 

我錯過了什麼？爲什麼Safari中的翻轉動畫很糟糕？

親切的問候，

ps。我不使用-webkit-前綴，因爲它不應該再需要

Answer 1

嘗試

/* entire container, keeps perspective */ 

.flip-container { 
    perspective: 1000; 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 

/* UPDATED! flip the pane when .flipped class applied */ 
    .flip-container.flipped .back { 
    -webkit-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
} 
.flip-container.flipped .front { 
    -webkit-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 

.flip-container, .front, .back { 
    width: 7.1428rem; 
    height: 10rem; 
} 

/* flip speed goes here */ 
.flipper { 
    -webkit-transition: 200ms; 
    transition: 200ms; 

    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 

    position: relative; 
}