關鍵幀動畫不工作的Safari瀏覽器

我已經使用CSS創建的動畫，是該關鍵幀動畫不工作的Safari瀏覽器

.div 
 
{ 
 
\t position:relative; 
 
\t width:250px; 
 
\t height:150px; 
 
\t 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 
 
{ 
 
\t 0% 
 
\t { 
 
\t \t width:0px; 
 
\t } 
 
\t 100% 
 
\t { 
 
\t \t width:100px; 
 
\t } 
 
} 
 
@keyframes drawline 
 
{ 
 
\t 0% 
 
\t { 
 
\t \t width:0px; 
 
\t } 
 
\t 100% 
 
\t { 
 
\t \t width:100px; 
 
\t } 
 
}

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

這個動畫正在Chrome，但不工作的Safari瀏覽器的代碼，因爲我已經給了動畫到：之前。我該怎麼辦？請幫忙。

來源

2017-06-16 vedankita kumbhar

我有Safari瀏覽器版本10.1.1，它似乎工作得很好。你使用什麼版本？ –

我使用的5.1.7版本。 –

Safari瀏覽器5.1.7是一個10歲的版本的Windows和一長串時間前已經停產，所以剛落，立即和使用別的 – LGSon

嘗試默認width: 100px;設置爲width: 0px;。顯然開始動畫形式的「0％」時，Safari瀏覽器並不快樂。你可以嘗試這樣的事情：

.div 
 
{ 
 
\t position:relative; 
 
\t width:250px; 
 
\t height:150px; 
 
\t 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 
 
{ 
 
\t 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>

來源

2017-06-16 06:37:22

感謝您的答覆，但它不是在我的Safari瀏覽器版本的工作。 –

關鍵幀動畫不工作的Safari瀏覽器

回答

相關問題