關鍵幀動畫無法在Safari上運行

Question

我已經使用CSS創建了動畫，下面是該代碼

 .div { position:relative; width:250px; height:150px; background-color:gray; } .div:before { content: ""; position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; animation-name: drawline; animation-duration: 2s; -webkit-animation-name: drawline; -webkit-animation-duration: 2s; border: 1px solid #fff; } @-webkit-keyframes drawline { 0% { width:0px; } 100% { width:100px; } } @keyframes drawline { 0% { width:0px; } 100% { width:100px; } } 

 <div class="div"></div> 

該動畫適用於Chrome，但不適用於野生動物園，因為我已將動畫賦予：before。 我該怎么辦？ 請幫忙。

Answer 1

嘗試設置默認width: 100px; 到width: 0px; 。 顯然，當啟動動畫形式“ 0％”時，Safari並不滿意。 您可以嘗試這樣的事情：

 .div { position:relative; width:250px; height:150px; background-color:gray; } .div:before { content: ""; position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; animation-name: drawline; animation-duration: 2s; -webkit-animation-name: drawline; -webkit-animation-duration: 2s; border: 1px solid #fff; } @-webkit-keyframes drawline { 0% { opacity: 0; width: 100px; } 1% { opacity: 1; width: 0; } 100% { width: 100px; } } @keyframes drawline { 0% { opacity: 0; width: 100px; } 1% { opacity: 1; width: 0; } 100% { width: 100px; } } 

 <div class="div"></div>