CSS3动画延时的一点疑问

Question

大体意思是我想让content2延时2s再向上淡入，但我设置了延时时间2s后，这样却导致一开始content2直接显示了，2s后再进行淡入的动画，能否让它一开始隐藏，2s后再淡入？
PS：想用纯CSS3来解决

#content2 {position: absolute; left: 50%; top: 100px; width: 200px; height: 300px;background: #ccc;-webkit-animation: animations2 3s linear 2s;}
@-webkit-keyframes animations2 {
    0% { opacity: 0; top: 130px;}
    100% {opacity: 1; top: 100px;}
}

Answer 1

知識點: animation-fill-mode

---

http://jsfiddle.net/xtftj288/embedded/result,css,html/

Answer 2

CSS3 動畫是非常蛋疼的，首先應該要有這樣的心理準備。

對於題主的情況，有兩種解決方案都可以。

第一，再寫一個設置 #content2 透明度為 0 的動畫，時長 2s，剛好掩蓋掉 animations2 的 2s 延時，讓它們在 #content2 上同時播放。

第二，修改 animations2，不要延時 2s，而把這 2s 放到 keyframes 裏麵作為動畫的一部分。在題目裏麵，可以把整個動畫看成 5s，0%, 40% { opacity: 0; top: 130px; }，100% 部分不變，效果和延時是一樣的。

Answer 3

不是標準蛋疼，而是動畫延遲不是這麼用的。

延遲就是延遲，延遲的時候動畫沒有開始。
動畫沒有開始的時候什麼樣子，取決於其它 CSS 的定義。

但是，題主看你這架勢不是用動畫的啊，應該是用 transition 才對。

不過你要是隻想做一個出場動畫，那動畫就應當從頁麵加載就開始執行，至於具體怎麼個運動，比如速度之類的，應當歸到動畫裏麵。

或者，用 animation-fill-mode，指定了動畫前後要應用的樣式。

Answer 4

以上回答的顯得很蛋疼！

直接指定

#content2{opacity:0;-webkit-animation: animations2 3s linear 2s 1 forwards;}