Safari瀏覽器變換的動畫不響應動態寬度

Question

有問題，使得這種行爲正確在Safari（在Chrome和Firefox正常工作）：https://jsfiddle.net/my794fyx/4/

在小提琴的紅盒子應該從左向右移動具有移位pivot-點。通過動畫left屬性來移動紅色框。樞軸點通過動畫translateX()進行移動。

將鼠標懸停在黑盒子上時，有一個轉換樞軸點的重要性：紅盒子的寬度會增加。紅框的生長方向由樞軸點決定 - 當紅框位於左側時，它應該向右延伸，而在右側時，它應該向左延伸。這可以看出在Chrome和Firefox上正常工作。

在Safari上，當您將鼠標懸停在黑匣子上並且紅框長寬時，它似乎不會被transform: translateX(-100%)考慮在內。盤旋時，紅色框超出黑色框。

尋找一些解決問題的瀏覽器問題或替代實現。

Answer 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