Safari浏览器变换的动画不响应动态宽度

有问题，使得这种行为正确在Safari（在Chrome和Firefox正常工作）：https://jsfiddle.net/my794fyx/4/Safari浏览器变换的动画不响应动态宽度

在小提琴的红盒子应该从左向右移动具有移位pivot-点。通过动画left属性来移动红色框。枢轴点通过动画translateX()进行移动。

将鼠标悬停在黑盒子上时，有一个转换枢轴点的重要性：红盒子的宽度会增加。红框的生长方向由枢轴点决定 - 当红框位于左侧时，它应该向右延伸，而在右侧时，它应该向左延伸。这可以看出在Chrome和Firefox上正常工作。

在Safari上，当您将鼠标悬停在黑匣子上并且红框长宽时，它似乎不会被transform: translateX(-100%)考虑在内。盘旋时，红色框超出黑色框。

寻找一些解决问题的浏览器问题或替代实现。

2017-03-17 Hiroki Osame

您可能需要使用的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

来源

2017-03-19 03:11:46 MasterBob

Safari浏览器变换的动画不响应动态宽度

回答

相关问题