纯CSS悬停过渡在保持图像居中时是跳跃的(在Safari中)

Question

受到Design Shack的启发，我想在悬停时稍微放大一些可链接的照片。但是，我希望动画居中，所以就像我们稍微放大一样。

为了使图像保持居中，我摆弄了顶部、左侧、顶部边距和左边距以使其正常工作。我什至不确定它是如何工作的：-(但它有效...

。除了动画实际上有点断断续续和跳跃，至少在 Safari 中是这样——最糟糕的是 10.9 的 Safari。 (不过，Firefox和Chrome做得更好。

查看此处的示例：http://jsfiddle.net/MnHVk/1/

突出的部分：

.card img:hover {
    height:110%;
    width:110%;
    top:10%;
    left:-10%;
    margin-top:-10%;
    margin-left:5%;
}

将跳跃动画与不尝试居中的版本进行比较，如下所示：http://jsfiddle.net/MnHVk/2/

有人能想到任何其他方法来制作这个悬停动画，不会导致如此跳跃的效果吗？也许还有其他一些技术可以调整位置，以便在将图像悬停在图像上时，它平滑移动？

Answer 1

如果你使用transform，它应该通过GPU渲染，我认为，很顺利

.card img:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%;
}

更新的演示