問題描述

大體意思是我想讓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;}}

問題解答

知識點: animation-fill-mode

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

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

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

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

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

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

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

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

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

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

以上回答的顯得很蛋疼！

直接指定

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