css3同步多元素動畫

我有2個元素，一個在另一個的頂部，他們都有動畫。儘管使用了相同的關鍵幀規則和動畫屬性，但元素在第一個循環中不同步，但在第一個循環後同步。爲什麼？！css3同步多元素動畫

的標記：

<div class="small xfade"> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
</div> 

<div class="big xfade"> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
</div>

的CSS：

@keyframes xfade { 
    0% { opacity:1; } 
    17% { opacity:1; } 
    25% { opacity:0; } 
    92% { opacity:0; } 
    100% { opacity:1; } 
} 

.xfade span { 
    animation-name: xfade; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 8s; 
}

fiddle

編輯在我的現實世界中的實現，「小」的元素是半透明的，所以那些在動畫開始時可以看到底部。我認爲在所有小孩的孩子身上設置opacity: 0;都可以解決這個問題（因爲關鍵幀規則一旦動畫開始就會使其回到1）;唉，沒有。這個問題在第一次循環之後也神祕地解決了。

任何提示，也將不勝感激。

來源

2014-01-24 jacob

你是否注意到你有一個語法錯誤？ .xfade.big跨度：第n種類型（1）{ \t background：＃33000; } – vals

更新的小提琴。你想要這個嗎？ http://jsfiddle.net/3KNa9/1/ –

@vals不，但這實際上並沒有引起問題。 – jacob

正如vals提到的，你給出的顏色代碼之一是錯誤的，所以第一和第二顏色是相同的。所以感覺就像動畫不同，因爲它是相同的顏色。（但實際上它的工作）

所以，我改變了顏色代碼，工作正常。

.xfade.big span:nth-of-type(4) { 
    background: #0300FF; 
}

Working Demo

來源

2014-01-24 07:42:46

css3同步多元素動畫

回答

相關問題