與css動畫無縫地交錯動畫

我正在處理CSS動畫，並且在嘗試添加一個事件以將一些動態動畫添加到頁面時遇到問題。與css動畫無縫地交錯動畫

爲簡單起見，這裏是一個「天空」的div的循環動畫：

.sky { 
width:100%; 
height: 100%; 
position: absolute; 
z-index: 1; 
-webkit-animation: animation-sky 30s linear infinite; 
} 

@-webkit-keyframes animation-sky{ 
0%, 100% {background-color: rgb(53, 110, 231);} 
16% {background-color: skyblue;} 
21% {background-color: orange;} 
31% {background-color: rgb(19, 2, 61);} 
77% {background-color: rgb(19, 2, 61);} 
82% {background-color: orange;} 
92% {background-color: skyblue;} 
}

正如你所看到的，它循環顏色之間，相當於一天的時間。

然後，使用綁定到一個按鈕一個jQuery事件監聽器，我的身體增加一個「動畫」級循環到一個新的動畫：

.animating .sky { 
    -webkit-animation: scene2-sky 38s linear 1; 
    -webkit-animation-delay: 22s; 
} 

@-webkit-keyframes scene2-sky{ 
     0% {background-color: rgb(19, 2, 61);} 
     100% {background-color: rgb(19, 2, 61);} 

}

我的延遲添加到動畫，因爲我有在關鍵幀中顯示背景顏色之前需要完成的其他部分。

我的問題是，而不是延遲動畫（就像我給它的22秒），它只是將背景顏色變成白色，直到22秒。

有什麼辦法讓它繼續前面的動畫，直到動畫延遲隊列中的「動畫」動畫開始？

這裏有一個鏈接的jsfiddle澄清：http://jsfiddle.net/benjtinsley/UDzh7/

來源

2013-02-05 Ben Tinsley

綠色的天空？你基於海王星，我看到:)看看這裏http://desandro.github.io/motion-emotion/爲循環顏色動畫，也許這會帶給你前進。 David DeSandro解釋說，他將我們的砌體，同位素和包裝帶入了jQuery魔術世界。 – Systembolaget

請清理你的小提琴，沒有人可以幫你那樣。您可以在「Frameworks＆Extensions」下的左框架中包含jQuery，不需要直接將其粘貼到JS框架中。 –

一個給定的元素只能有一個屬性的值。

當您設置屬性「動畫」的值時，您會覆蓋該屬性的任何值。新的動畫值有延遲這一事實不會改變這一事實。

爲了實現你想要的，只需在jQuery函數中設置延遲，將新類設置爲元素

來源

2013-07-21 15:22:56 vals

與css動畫無縫地交錯動畫

回答

相關問題