jQuery CSS 关键帧动画：在动画开始之前隐藏元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15404520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Keyframe animation: Hiding element before animation starts
提问by Sven
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?
有没有一种 CSS 方法可以隐藏元素并在 x 秒后使用关键帧动画将其淡入淡出？或者我需要 JavaScript/jQuery 吗？怎么做？
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.
目前，它也在动画开始之前显示，如果我设置了opacity: 0;，动画完成后动画会跳回该值。
回答by Christofer Vilander
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.
你很近。一个简单的方法是添加animation-fill-mode: forwards;这将保留最后一个关键帧，并在这种情况下保持 div 可见。
Here's an updated version of your Fiddlewhere the animation starts after 4s (as you specified) and keeps the div visible instead of jumping back to it's original state (opacity: 0;).
这是您的Fiddle的更新版本，其中动画在 4 秒后开始（如您指定的那样）并保持 div 可见，而不是跳回其原始状态 ( opacity: 0;)。
Hope that helps!
希望有帮助！
回答by dkrasniy
Easiest method would just be adding this to the CSS:
最简单的方法就是将它添加到 CSS 中：
animation-fill-mode: both;
Will hold the animation before and after.
将在前后保持动画。
回答by Antony
If you want to use @keyframes, apply the delay with the use of keyframes.
如果要使用@keyframes，请使用关键帧应用延迟。
You can change a delay of 4s and an animation duration of 1s into an animation of 5s with keyframes starting at 80%.
您可以将 4 秒的延迟和 1 秒的动画持续时间更改为 5 秒的动画，关键帧从 80% 开始。
See fiddle.
见小提琴。
@-webkit-keyframes slidein {
0% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes slidein {
0% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes slidein {
0% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes slidein {
0% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 1; }
}
div {
position: absolute;
width: 50px;
height: 50px;
top: 150px;
right: 150px;
background-color: black;
-webkit-animation: slidein 5s ease 1 normal;
-moz-animation: slidein 5s ease 1 normal;
-o-animation: slidein 5s ease 1 normal;
animation: slidein 5s ease 1 normal;
}
回答by alpipego
If you want your animation to be something different than a fade-in using opacity, e.g. animate the width; you could put the opacity:1;on 1% of the animation:
如果您希望您的动画与使用不透明度的淡入不同，例如为宽度设置动画；你可以把opacity:1;1% 的动画：
@keyframes slidein {
0% {
opacity:0;
width:0;
}
1% {
opacity:1;
}
100% {
opacity:1;
width:100px;
}
}
Note that you have to repeat the opacity:1;at the end of the animation, i.e. 100%. Otherwise it will fade that element out.
请注意，您必须opacity:1;在动画结束时重复，即 100%。否则它会淡出该元素。
回答by matpol
You are probably looking at using CSS transitions- this page probably has the answer you are looking for.
您可能正在考虑使用CSS 转换- 此页面可能有您正在寻找的答案。
