CSS3动画延时的一点疑问

问题描述

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