CSS关键帧动画:在动画开始之前隐藏元素

Question

是否有一种CSS方法可以隐藏元素并在x秒后使用关键帧动画将其淡入？或者我需要JavaScript/jQuery吗？怎么做？

此时,它也会在动画开始之前显示,如果我设置opacity: 0;,动画在动画完成后会跳回到该值.

小提琴

Answer 1

你很亲密 一种简单的方法是添加animation-fill-mode: forwards;哪个将持久保存最后一个关键帧,在这种情况下保持div可见.

这是你的小提琴的更新版本,其中动画在4s后开始(如你所指定的)并保持div可见而不是跳回到它的原始状态(opacity: 0;).

希望有所帮助!

Answer 2

最简单的方法就是将其添加到CSS中:

 animation-fill-mode: both;

将前后保持动画.