CSS3动画：为什么不动画相同的属性工作？

我试图让这个动画在Chrome的工作：CSS3动画：为什么不动画相同的属性工作？

@-webkit-keyframes flipAnimation { 
    0% { 
     -webkit-transform: perspective(400px) rotateY(90deg); 
     -webkit-transform-origin: right center; 
    } 
    100% { 
     -webkit-transform: perspective(400px) rotateY(0deg); 
     -webkit-transform-origin: right center; 
    } 
} 

@-webkit-keyframes appear { 
    0% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 1; 
    } 
} 

@-webkit-keyframes disappear { 
    0% { 
     opacity: 1; 
    } 
    100% { 
     opacity: 0; 
    } 
} 

.flipAnimation { 
    opacity: 0; 
    -webkit-backface-visibility: visible !important; 
    -webkit-animation: flipAnimation .5s, appear .2s, disappear .3s; 
    -webkit-animation-delay: 0s, .3s, 2s; 
}

但它总是出问题。首先，div.flipAnimation不会以不透明度0出现。其次，div闪烁进入和退出，最后消失的动画似乎没有正确触发。在同一个动画中有2个不透明动画是否存在问题，即使它们间隔延迟？

来源

2012-10-04 zakdances

嗨，我想帮助你可以把所有的HTML代码或链接到jdFiddle谢谢 – yossi

@yossi试试这个jFiddle http://jsfiddle.net/AQD9h/ – zakdances

我不太清楚，如果这是你瞄准了预期的效果，但你可以在我的解决方案查找：

JS Fiddle demo

我认为你正在寻找无法达到的效果与keyframes。请确认这是否令人满意！

来源

2012-10-04 07:22:05

我不想扭转矩形...我只想让它在淡入淡出的时候变直，然后在一段延迟之后淡出。 – zakdances

拉直？这对我来说不是很明显，你的意思是拉直... –

这里的代码工作。 Demo Jsfiddle 它不工作的共振是延迟时间。你看不到不同的东西。所以我改变了10秒的延迟时间，只是因为你看到它是工作。 Your code work with other delay

我在代码中进行一些改变的一看就知道是工作，只是根据你的要求更改时间和粥的事情：

首先你看到的出现，flipAnimationu后20s togther工作，你会看到消失工作，并改变颜色到天蓝色，黑色，天蓝色。

来源

2012-10-04 07:35:48 yossi

看起来像这样不能用关键帧单独完成。我将使用jQuery来做最后的淡出动画。

来源

2012-10-04 09:03:25 zakdances

CSS3动画：为什么不动画相同的属性工作？

回答

相关问题