加载时闪烁的CSS3动画

Question

在动画开始之前，我看到我的#content闪烁。如果我添加不透明度，它可以工作：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 for Windows中看过它，我明白你的意思了。你可能在不经意间引入了动画延迟。

更改：

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

为：

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

似乎为我解决了这个问题。