加载闪烁的CSS3动画

Question

在动画开始之前，我看到闪烁了我的＃内容。它可以工作，如果我添加不透明度：0到#content。但是，然后不支持旧的浏览器。任何其他解决办法？

我的小提琴：http://jsfiddle.net/9vafv3sn/

#content { 
    -webkit-animation: anime1 .6s .1s ease-in forwards; 
    background-color: #aaa; 
    width: 500px; 
    height: 500px; 
} 
@-webkit-keyframes anime1 { 
    0% { 
     opacity: 0; 
     top: -100px; 
    } 
    100% { 
     opacity: 1; 
     top: 0px; 
    } 
} 

Answer 1

我看着它在Chrome浏览器的Windows，我明白你的意思。您可能无意中引入了动画延迟。

更改：

-webkit-animation: anime1 .6s .1s ease-in forwards; 

到：

-webkit-animation: anime1 .6s ease-in forwards; 

似乎解决这个问题对我来说。