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 {
从{height:0;}
到{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屋!