多個關鍵幀動畫無法在Safari瀏覽器中工作

我正在處理具有大量CSS3動畫的HTML5橫幅。爲了製作可重用的關鍵幀動畫，我在單個元素上使用了多個動畫。除Safari瀏覽器外，它的工作完美。多個關鍵幀動畫無法在Safari瀏覽器中工作

CSS：

.text1 { 
    -webkit-animation: fadeOutRight 1s 3s forwards; 
    animation: fadeOutRight 1s 3s forwards; 
} 
.text2 { 
    -webkit-animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards; 
    animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards; 
} 
.text3 { 
    -webkit-animation: fadeInLeft 1s 8s both; 
    animation: fadeInLeft 1s 8s both; 
} 

/* fadeInLeft */ 
@-webkit-keyframes fadeInLeft { 
    0% { -webkit-transform: translateX(-100px); opacity: 0; } 
    100% { -webkit-transform: translateX(0px); opacity: 1; } 
} 
@keyframes fadeInLeft { 
    0% { transform: translateX(-100px); opacity: 0; } 
    100% { transform: translateX(0px); opacity: 1; } 
} 

/* fadeOutRight */ 
@-webkit-keyframes fadeOutRight { 
    0% { -webkit-transform: translateX(0px); opacity: 1; } 
    100% { -webkit-transform: translateX(100px); opacity: 0; } 
} 
@keyframes fadeOutRight { 
    0% { transform: translateX(0px); opacity: 1; } 
    100% { transform: translateX(100px); opacity: 0; } 
}

jsfiddle link

可行的解決方案：

總結與其他元素/多元素&單一的動畫添加到每個元素。該解決方案需要額外的包裝元素樣式。
將多個動畫合併爲一個&該解決方案增加了keyframes rule的複雜性，並且對於複雜動畫而言不易維護。
根據另一個stackOverflow post的接受答案 - You cannot animate same attribute more than once, on a same element, the last one will overwrite other。只有在我的情況下safari &第一個動畫只運行不是第二個。如果我不在多個動畫上動畫相同的屬性，那麼對於Safari（jsfiddle）也沒有問題。這一個不是適合我，因爲我將需要動畫動畫多個動畫相同的屬性。

注：

雖然我使用的是相同的元素多的動畫，但我不會在同一時間的動畫，還有每個動畫之間的延遲。

問：

是否有可能同一個元素上使用多個CSS3動畫無論動畫屬性的？

來源

2016-01-04 Shishir Morshed

-1

是的，你可以在同一個元素中有多個動畫，用逗號分隔，就像你已經在問題中做的那樣。

animation: fadeOutRight 1s, fadeInLeft 2s;

但是，您不能在這些動畫上使用相同的屬性，或者級聯的規則會覆蓋它。

正如你所說，最後的唯一解決方案是包裝或合併動畫。

動畫文檔中未指定在這些情況下使用向前，向後和兩者在相同屬性上的覆蓋。

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

的目標將通過保留最後設置的計算值（或第一，或兩者）執行過程中遇到的關鍵幀。最後一個關鍵幀取決於動畫方向和動畫迭代次數的值

來源

2017-11-16 08:34:50 Malkev

多個關鍵幀動畫無法在Safari瀏覽器中工作

回答

相關問題