CSS3animation和显示无

我有一个CSS 3animation的div在一段时间后滑入。 我想要的是几个div来填充幻灯片的空间，然后将这些元素推到页面上。

当我第一次尝试这个幻灯片仍然占用空间，即使不可见时。 如果我更改div display:none div不滑入。

我如何让div在占用时间之前不会占用空间（使用CSS进行计时）。

我正在使用Animate.css作为animation。

这是代码的样子： 

 <div id="main-div" class="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; }

正是在这一点上，我希望主要股东推动其他股东下来，因为它进来。

我该怎么做呢？

注：我已经考虑使用jQuery来做到这一点，但我更喜欢严格使用CSS，因为它更平滑，时序控制得更好一些。

编辑

我曾经尝试过Duopixel提出的build议，但是我误解了，并没有正确地做，或者它不起作用。 这里是代码：

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（或jQuery，就此而言）不能在display: none; 并display: block; 。 更糟的是：它不能在height: 0和height: auto之间animation。 所以你需要硬编码的高度（如果你不能硬编码的价值，那么你需要使用JavaScript，但这是一个完全不同的问题）; 

 #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;} }

你提到你正在使用Animate.css，我不熟悉，所以这是一个香草CSS。

你可以在这里看到一个演示： http : //jsfiddle.net/duopixel/qD5XX/

有几个答案，但这是我的解决scheme：

我使用opacity: 0和visibility: hidden 。 为了确保在animation之前设置visibility ，我们必须设置正确的延迟。

我使用http://lesshat.com来简化演示，如果没有这个，只需添加浏览器前缀即可。;

（例如-webkit-transition-duration: 0, 200ms; ） 

 .fadeInOut { .transition-duration(0, 200ms); .transition-property(visibility, opacity); .transition-delay(0); &.hidden { visibility: hidden; .opacity(0); .transition-duration(200ms, 0); .transition-property(opacity, visibility); .transition-delay(0, 200ms); } }

所以只要你添加hidden到你的元素的类，它会淡出。

我有同样的问题，因为尽快display: x; 是在animation中，它不会animation。

我最终创build了自定义关键帧，首先更改display值，然后更改其他值。 可以给一个更好的解决scheme

或者，而不是使用display: none; 使用position: absolute; visibility: hidden; position: absolute; visibility: hidden; 它应该工作。

以下将会让你在一个元素的时候animation

  1. 给它一个显示 – 无
  2. 给它一个显示 – 块

CSS 

 .MyClass { opacity: 0; display:none; transition: opacity 0.5s linear; -webkit-transition: opacity 0.5s linear; -moz-transition: opacity 0.5s linear; -o-transition: opacity 0.5s linear; -ms-transition: opacity 0.5s linear; }

JavaScript的 

 function GetThisHidden(){ $(".MyClass").css("opacity", "0").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', HideTheElementAfterAnimation); } function GetThisDisplayed(){ $(".MyClass").css("display", "block").css("opacity", "1").unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend"); } function HideTheElementAfterAnimation(){ $(".MyClass").css("display", "none"); }

你可以pipe理一个纯粹的CSS实现与max-height 

 #main-image{ max-height: 0; overflow: hidden; background: red; -prefix-animation: slide 1s ease 3.5s forwards; } @keyframes slide { from {max-height: 0;} to {max-height: 500px;} }

我在这里更新了Duopixel的演示： http : //jsfiddle.net/qD5XX/231/

[因为我没有足够的声望评论他的答案]

我如何让div在占用时间之前不会占用空间（使用CSS进行计时）。

这是我解决同样问题的方法。

此外，我有一个onclick加载另一个幻灯片的最后一帧，它不能点击，直到最后一帧可见。

基本上我的解决scheme是保持使用一个scale(0.001)的div 1像素高，当我需要它放大。 如果您不喜欢缩放效果，则可以在缩放幻灯片后将opacity恢复为1。 

 #Slide_TheEnd { -webkit-animation-delay: 240s; animation-delay: 240s; -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; -moz-animation-duration: 20s; -webkit-animation-duration: 20s; animation-duration: 20s; -moz-animation-name: Slide_TheEnd; -webkit-animation-name: Slide_TheEnd; animation-name: Slide_TheEnd; -moz-animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -moz-animation-direction: normal; -webkit-animation-direction: normal; animation-direction: normal; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; transform: scale(0.001); background: #cf0; text-align: center; font-size: 10vh; opacity: 0; } @-moz-keyframes Slide_TheEnd { 0% { opacity: 0; transform: scale(0.001); } 10% { opacity: 1; transform: scale(1); } 95% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.001); } }

为了字节的缘故，其他关键帧被移除。 请忽略奇怪的编码，它是由一个PHP脚本从数组中挑选值和str_replacing一个模板：我懒得重新键入100 + div幻灯片上的每个专有前缀的一切。

Interesting Posts