問(wèn)題描述

大體意思是我想讓content2延時(shí)2s再向上淡入，但我設(shè)置了延時(shí)時(shí)間2s后，這樣卻導(dǎo)致一開(kāi)始content2直接顯示了，2s后再進(jìn)行淡入的動(dòng)畫(huà)，能否讓它一開(kāi)始隱藏，2s后再淡入？PS：想用純CSS3來(lái)解決

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

問(wèn)題解答

知識(shí)點(diǎn): animation-fill-mode

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

CSS3 動(dòng)畫(huà)是非常蛋疼的，首先應(yīng)該要有這樣的心理準(zhǔn)備。

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

第一，再寫(xiě)一個(gè)設(shè)置 #content2 透明度為 0 的動(dòng)畫(huà)，時(shí)長(zhǎng) 2s，剛好掩蓋掉 animations2 的 2s 延時(shí)，讓它們?cè)?#content2 上同時(shí)播放。

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

不是標(biāo)準(zhǔn)蛋疼，而是動(dòng)畫(huà)延遲不是這麼用的。

延遲就是延遲，延遲的時(shí)候動(dòng)畫(huà)沒(méi)有開(kāi)始。動(dòng)畫(huà)沒(méi)有開(kāi)始的時(shí)候什麼樣子，取決於其它 CSS 的定義。

但是，題主看你這架勢(shì)不是用動(dòng)畫(huà)的啊，應(yīng)該是用 transition 纔對(duì)。

不過(guò)你要是只想做一個(gè)出場(chǎng)動(dòng)畫(huà)，那動(dòng)畫(huà)就應(yīng)當(dāng)從頁(yè)面加載就開(kāi)始執(zhí)行，至於具體怎麼個(gè)運(yùn)動(dòng)，比如速度之類(lèi)的，應(yīng)當(dāng)歸到動(dòng)畫(huà)裏面。

或者，用 animation-fill-mode，指定了動(dòng)畫(huà)前後要應(yīng)用的樣式。

以上回答的顯得很蛋疼！

直接指定

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