【发布时间】：2018-03-04 13:25:00
【问题描述】：
正在为我在 Safari（版本 10.1.1）中遇到的错误寻找解决方法，在该错误中，使用 % 翻译为“转换”设置动画的元素在调整元素大小时无法正确更新。
这是一个示例用例：其中图像位于类似于背景“封面”的文本区域后面，使用：
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
按预期工作。
但是，如果我们对 transform 属性进行动画处理，使其具有相同的值（但动画）：
@keyframes same_transform_as_keyframes {
0%, 100% { transform: translateX(-50%) translateY(-50%); }
}
animation: same_transform_as_keyframes 1s linear 0s infinite normal none running;
然后在 Safari 10.1.1 和 iOS Safari 中，转换最初按预期工作，但在调整元素大小时不会正确更新偏移量。
它在 Chrome 中运行良好。
这是一个 CodePen 演示问题。
在我看来，问题在于 Safari 正在计算转换的 % 值，但在调整元素大小时不会重新计算这些值。
任何有关 Safari 潜在修复的想法或帮助将不胜感激。类似于“强制”Safari 通过更改其他一些属性不使用 javascript 来重新计算动画？
澄清一下，我不是在寻找一种解决方法来使背景图像居中。我正在寻找一种解决方法来允许使用动画 translate(%) 值。
【问题讨论】：
-
还要记住
transform是依赖于浏览器的，所以使用这样的东西可能有助于转换： translate(-50%, -50%); -webkit-transform: 翻译(-50%, -50%); -moz 转换：翻译（-50%，-50%）； -o-transform: 翻译(-50%, -50%);
标签： html css animation safari css-animations