翻转动画工作确定在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; 
}