CSS3动画和显示无 [英] CSS3 Animation and Display None
问题描述
我有一个CSS 3动画的div在一段时间后滑动。我想要的是几个div填充动画div的幻灯片中的空间，然后它将推这些元素下来的页面。
当我试图在第一个div幻灯片仍然占用空间，即使它不可见。如果我将div改为 display：none ，则div不会滑入。
如何让div不占用空间，直到时间到来（使用CSS的时间）。
我使用Animate.css作为动画。
下面是代码的样子：
< div id =main-divclass =animated fadeInDownBig><！ - Content - >< / div&
< div id =div1><！ - Content - >< / div>
< div id =div2><！ - Content - >< / div>
< div id =div3><！ - Content - >< / div>
代码显示我希望主div被隐藏，其他div首先显示。然后我有以下延迟集：
＃main-div {
-moz-animation-delay：3.5s ;
-webkit-animation-delay：3.5s;
-o-animation-delay：3.5s;
animation-delay：3.5s;
}
这是我希望主div推动另一个
注意：我已经考虑过使用jQuery做到这一点，但我更喜欢使用严格的CSS，因为它更平滑，时间是一个更好的控制。
编辑
我尝试过Duopixel建议，但我不明白，我不正确地做或它不工作。这是代码：
HTML
< div id =main-divclass =animated fadeInDownBig><！ - Content - >< / div&
CSS
$ b
＃main-image {
height：0;
overflow：hidden;
-moz-animation-delay：3.5s;
-webkit-animation-delay：3.5s;
-o-animation-delay：3.5s;
animation-delay：3.5s;
}
＃main-image.fadeInDownBig {
height：375px;
}
CSS事实）不能在 display：none; 和 display：block; 之间进行动画。更糟糕的是：它不能在 height：0 和 height：auto 之间进行动画。所以你需要硬编码的高度（如果你不能硬编码的值，那么你需要使用javascript，但这是一个完全不同的问题）;
＃main-image {
height：0;
overflow：hidden;
background：red;
-prefix-animation：slide 1s ease 3.5s forward;
}
@ -prefix-keyframes slide {
from {height：0;}
to {height：300px;}
}
你提到你使用Animate.css，我不熟悉，所以这是一个香草CSS。
您可以在这里看到演示： http://jsfiddle.net / duopixel / qD5XX /
I have a CSS 3 Animation for a div that slides in after a set amount of time. What I would like is for a few divs to fill the space of the animated div that slides in, which it will then push those elements down the page.
When I attempt this at first div that slides in still takes up space even when it is not visible. If I change the div to display:none the div doesn't slide in at all.
How do I have a div not take up space until it is timed to come in (using CSS for the timing.)
I am using Animate.css for the animations.
Here is what the code looks like:
<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>
<div id="div1"><!-- Content --></div>
<div id="div2"><!-- Content --></div>
<div id="div3"><!-- Content --></div>
As the code shows I would like the main div to be hidden and the other divs show at first. Then I have the following delay set:
#main-div{
-moz-animation-delay: 3.5s;
-webkit-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
animation-delay: 3.5s;
}
It is at that point that I would like the main div to push the other divs down as it comes in.
How do I do this?
Note: I have considered using jQuery to do this, however I prefer using strictly CSS as it is smoother and the timing is a bit better controlled.
EDIT
I have attempted what Duopixel suggested but either I mis-understood and am not doing this correctly or it doesn't work. Here is the code:
HTML
<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>
CSS
#main-image{
height: 0;
overflow: hidden;
-moz-animation-delay: 3.5s;
-webkit-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
animation-delay: 3.5s;
}
#main-image.fadeInDownBig{
height: 375px;
}
CSS (or jQuery, for that matter) can't animate between display: none; and display: block;. Worse yet: it can't animate between height: 0 and height: auto. So you need to hard code the height (if you can't hard code the values then you need to use javascript, but this is an entirely different question);
#main-image{
height: 0;
overflow: hidden;
background: red;
-prefix-animation: slide 1s ease 3.5s forwards;
}
@-prefix-keyframes slide {
from {height: 0;}
to {height: 300px;}
}
You mention that you're using Animate.css, which I'm not familiar with, so this is a vanilla CSS.
You can see a demo here: http://jsfiddle.net/duopixel/qD5XX/
这篇关于CSS3动画和显示无的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
