加載閃爍的CSS3動畫

在動畫開始之前，我看到閃爍了我的＃內容。它可以工作，如果我添加不透明度：0到#content。但是，然後不支持舊的瀏覽器。任何其他解決辦法？加載閃爍的CSS3動畫

#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; 
    } 
}

來源

2014-08-30 l00per

動畫取決於您正在使用的Web客戶端。哪個？ – 2014-08-30 12:05:44

如果你想支持舊瀏覽器，你應該使用jQuery或其他簡單的動畫框架。 – Brunis 2014-08-30 12:07:25

@KIKOSoftware你看到webkit供應商的前綴嗎？ :) – Brunis 2014-08-30 12:08:03

我看着它在Chrome瀏覽器的Windows，我明白你的意思。您可能無意中引入了動畫延遲。

更改：

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

到：

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

似乎解決這個問題對我來說。

來源

2014-08-30 13:04:12

是的，這有效。但通常需要延遲。 – l00per 2014-08-31 12:39:00

如果您想要延遲，您可以通過製作動畫的「序列」來實現。一個用於第一個.1s保持div透明，另一個用於下一個.6s的淡入。使用百分比例如。這裏是一個例子：http://jsfiddle.net/KIKO_Software/3mkbb92e/ – 2014-08-31 13:35:51

這是一個非常好的主意，並且工作正常:) – l00per 2014-09-01 06:00:39

加載閃爍的CSS3動畫

回答

相關問題