用于flipcard的CSS3动画在Safari中不起作用

为我的个人网站制作一张翻转卡，在悬停的两张照片之间翻转。在Chrome中工作良好，但在Safari中则不行，尽管所有供应商前缀都已准备就绪。对我做错了什么有什么建议吗

HTML:

这似乎是一个很简单的问题，但我完全被卡住了。我在另外几篇文章中看到过对百分比的定义非常细致，但我在这里不必使用它们

<center><div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
    <div class="front">
        <img src="http://i1299.photobucket.com/albums/ag62/Liz_Reddinger/name%20title4_zpslapxhev7.png" width="220px" draggable="false">
    </div>
    <div class="back">
        <img src="http://i1299.photobucket.com/albums/ag62/Liz_Reddinger/unnamed_zpsbjazifcu.png" width="170px" draggable="false">
    </div>
</div>