具有延迟的纯 CSS 动画可见性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30855985/
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
Pure CSS animation visibility with delay
提问by sebastienbarbier
I am trying to implement some animation onLoad without Javascript. JS is easy, CSS is ... not.
我正在尝试在没有 Javascript 的情况下实现一些 onLoad 动画。JS 很简单，CSS 则......不是。
I have a divwhich should be on display: none;and should be display: block;after 3 secondes. Lots of resources told me animate does not work with display, but should with visibility(which I use often in my transition).
我有一个div应该打开display: none;并且应该display: block;在 3 秒后。许多资源告诉我 animate 不适用于display，但应该与visibility（我在过渡中经常使用）。
Right know I have this terrible javascript function :
知道我有这个可怕的 javascript 函数：
<script type="text/javascript">
$(document).ready(function(){
$(".js_only").hide();
setTimeout(function () {
$(".js_only").show();
}, 3000);
});
</script>
I tried some animation in CSS but no result ... nothing seems to work.
我在 CSS 中尝试了一些动画，但没有结果......似乎没有任何效果。
I have few animation in my page, but just struggling with the display: none;on animation.
我的页面中几乎没有动画，但只是display: none;在动画中挣扎。
@-moz-keyframes showEffect {
0% { display: none; visibility: hidden; }
100% { display: block; visibility: block; }
}
@-webkit-keyframes showEffect {
0% { display: none; visibility: hidden; }
100% { display: block; visibility: block; }
}
@keyframes showEffect {
0% { display: none; visibility: hidden; }
100% { display: block; visibility: block; }
}
.css_only {
-moz-animation-name: showEffect;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 2.3s;
-webkit-animation-name: showEffect;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 2.3s;
animation-name: showEffect;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2.3s;
}
It is important as hidden, this element does not take space at all. I created a JSFiddleto make quite tests.
重要的是隐藏，这个元素根本不占用空间。我创建了一个 JSFiddle来进行相当多的测试。
My main concerne is SEO ... I don't think the JS option is really nice for that which is why I would like a pure CSS alternative. Also interested to test those animations and see where are those limits (Am I seeing one right now ?). Kinda having fun on such challenge.
我主要关注的是 SEO ......我认为 JS 选项并不适合，这就是为什么我想要一个纯 CSS 替代方案。也有兴趣测试这些动画，看看这些限制在哪里（我现在看到了吗？）。在这样的挑战中有点乐趣。
Thanks for reading, hope someone has an answer.
感谢阅读，希望有人解答。
回答by Oka
You are correct in thinking that displayis not animatable. It won't work, and you shouldn't bother including it in keyframe animations.
您认为display不可动画是正确的。它不起作用，您不应该费心将其包含在关键帧动画中。
visibilityis technically animatable, but in a round about way. You need to hold the property for as long as needed, then snap to the new value. visibilitydoesn't tween between keyframes, it just steps harshly.
visibility在技术上是可动画的，但以一种迂回的方式。您需要根据需要保留该属性，然后捕捉到新值。visibility不会在关键帧之间进行补间，它只是粗暴地步进。
.ele {
width: 60px;
height: 60px;
background-color: #ff6699;
animation: 1s fadeIn;
animation-fill-mode: forwards;
visibility: hidden;
}
.ele:hover {
background-color: #123;
}
@keyframes fadeIn {
99% {
visibility: hidden;
}
100% {
visibility: visible;
}
}<div class="ele"></div>If you want to fade, you use opacity. If you include a delay, you'll need visibilityas well, to stop the user from interacting with the element while it's not visible.
如果要淡化，请使用opacity. 如果包含延迟，则还需要visibility阻止用户在元素不可见时与其交互。
.ele {
width: 60px;
height: 60px;
background-color: #ff6699;
animation: 1s fadeIn;
animation-fill-mode: forwards;
visibility: hidden;
}
.ele:hover {
background-color: #123;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}<div class="ele"></div>Both examples use animation-fill-mode, which can hold an element's visual state after an animation ends.
两个示例都使用animation-fill-mode，它可以在动画结束后保持元素的视觉状态。
回答by Leo
回答by James Yang
You can play with delayprop of animation, just set visibility:visibleafter a delay, demo:
您可以使用动画delay道具播放，只需在延迟后设置，演示：visibility:visible
@keyframes delayedShow {
to {
visibility: visible;
}
}
.delayedShow{
visibility: hidden;
animation: 0s linear 2.3s forwards delayedShow ;
}So, Where are you?
<div class="delayedShow">
Hey, I'm here!
</div>回答by maioman
you can't animate every property,
你不能为每个属性设置动画，
here'sa reference to which are the animatable properties
这里有一个参考它们的动画特性
visibility is animatable while display isn't...
可见性是可动画的，而显示不是......
in your case you could also animate opacityor heightdepending of the kind of effect you want to render_
在你的情况下，你也可以动画opacity或height取决于你想要渲染的效果类型_
回答by Isaac Minogue
Unfortunately you can't animate the displayproperty. For a full list of what you can animate, try this CSS animation listby w3 Schools.
不幸的是，您无法为该display属性设置动画。有关可以设置动画的完整列表，请尝试w3 Schools 的这个CSS 动画列表。
If you want to retain it's visual position on the page, you should try animating either it's height(which will still affect the position of other elements), or opacity(how transparent it is). You could even try animating the z-index, which is the position on the z axis (depth), by putting an element over the top of it, and then rearranging what's on top. However, I'd suggest using opacity, as it retains the vertical space where the element is.
如果你想保留它在页面上的视觉位置，你应该尝试动画它height（这仍然会影响其他元素的位置）或opacity（它的透明度）。您甚至可以z-index通过将一个元素放在它的顶部，然后重新排列顶部的内容，来尝试为 z 轴（深度）上的位置设置动画。但是，我建议使用opacity，因为它保留了元素所在的垂直空间。
I've updated the fiddleto show an example.
我已经更新了小提琴来展示一个例子。
Good luck!
祝你好运！
