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同步多元素动画

回答

相关问题