CSS关键帧动画:动画开始前隐藏元素 [英] CSS Keyframe animation: Hiding element before animation starts

问题描述

是否存在CSS方式来隐藏元素并在x秒后使用关键帧动画对其进行淡入淡出?还是我需要JavaScript/jQuery?怎么做?

Is there a CSS way to hide an element and fading it in with a keyframe-animation after x seconds? Or do I need JavaScript/jQuery for that? How to do it?

此刻，它还在动画开始之前显示，如果我设置了opacity: 0;，则动画完成后，动画会跳回到该值.

At the moment, it is also show before the animation starts and if I set opacity: 0;, the animation jumps back to that value after the animation is complete.

小提琴

推荐答案

您很亲密.一种简单的方法是仅添加animation-fill-mode: forwards;，它将保留最后一个关键帧，在这种情况下，使div可见.

You are close. An easy way is to just add animation-fill-mode: forwards; which will persist the last keyframe and in this case keep the div visible.

这是您的小提琴的更新版本，其中动画在4秒后(如您所指定的)开始播放，并保持div可见跳回到其原始状态(opacity: 0;).

Here's an updated version of your Fiddle where the animation starts after 4s (as you specified) and keeps the div visible instead of jumping back to it's original state (opacity: 0;).

希望有帮助！

这篇关于CSS关键帧动画:动画开始前隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！