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

Knowledge point: animation-fill-mode

---

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

Answer 2

CSS3 animation is very painful, so you should first be mentally prepared for it.

For the subject’s situation, there are two solutions.

First, write another animation with a transparency of 0 for #content2 and a duration of 2s, which just covers up the 2s delay of animations2 and allows them to play simultaneously on #content2.

Second, modify animations2 so that instead of delaying 2s, put these 2s into keyframes as part of the animation. In the question, you can think of the entire animation as 5 seconds, with the 0%, 40% { opacity: 0; top: 130px; } and 100% parts unchanged, and the effect is the same as the delay.

Answer 3

It’s not a standard pain, but animation delay is not used in this way.

Delay is delay. When delayed, the animation does not start.
What the animation looks like when it doesn't start depends on other CSS definitions.

However, the questioner sees that your posture is not animated, it should be using transition.

But if you just want to make an exit animation, the animation should start executing when the page is loaded. As for the specific movement, such as speed, it should be included in the animation.

Alternatively, use animation-fill-mode to specify the style to be applied before and after the animation.

Answer 4

The above answer seems very painful!

Specify directly

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