css - 保持图像居中时，纯 CSS 悬停过渡会跳动(在 Safari 中)

Question

灵感来自 Design Shack ，我想让一些可链接的照片在鼠标悬停时稍微放大。但是，我希望动画居中，所以就像我们稍微放大了一样。

为了使图像保持居中，我摆弄了 top、left、margin-top 和 margin-left 来使其工作。我什至不确定如何它是如何工作的:-)但它确实有效...

...除了动画实际上有点断断续续和跳跃，至少在 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

如果你使用变换，它应该通过 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%;
}

updated demo