Safari 变换动画不响应动态宽度答案

【问题标题】：Safari transform animation not responding to dynamic widthSafari 变换动画不响应动态宽度
【发布时间】：2017-08-09 15:29:04
【问题描述】：

在 Safari 上正常运行时遇到问题（在 Chrome 和 Firefox 上运行良好）：https://jsfiddle.net/my794fyx/4/

在小提琴中，红框应该从左到右移动，并带有一个移动的枢轴点。通过为left 属性设置动画来移动红色框。通过动画translateX() 移动轴心点。

当将鼠标悬停在黑盒子上时，移动枢轴点的重要性就显现出来了：红盒子的宽度变大了。红盒的增长方向由轴心点决定——当红盒在左边时，它应该向右增长，当它在右边时，它应该向左增长。这可以在 Chrome 和 Firefox 上正常运行。

在 Safari 上，当您将鼠标悬停在黑色框上并且红色框变宽时，transform: translateX(-100%) 似乎没有考虑到这一点。悬停时，红框超过黑框。

寻找一些解决浏览器问题的方法或解决问题的替代方案。

【问题讨论】：

标签： css animation safari transform

【解决方案1】：

您可能想尝试在transform 和@keyframes 上使用-webkit- 前缀，所以：

@-webkit-keyframes {
    0% {
        left: 0%;
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    100% {
        left: 100%;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

但请记住，原件也必须保留！为了安全起见，您必须在其中添加-webkit- 前缀，以防不支持没有前缀的@keyframes，但不支持transform，尽管它更有可能反过来，就像上面的代码一样。

另见：here

【讨论】：