Html css链过渡动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10461897/
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 chain transition animation
提问by Phil
once the page is loaded, I want to "appear" three DIVs one after another.
加载页面后，我想一个接一个地“出现”三个 DIV。
how can I do this?
我怎样才能做到这一点？
I know how to make a single div appear on mouseover but without any triggering, one after another using css, how can I achieve such smooth transition?
我知道如何在鼠标悬停时显示单个 div 但没有任何触发，一个接一个地使用 css，我怎样才能实现如此平滑的过渡？
回答by Ozzy
The trick is to perform an animation first to hide all of the elements (when the page loads), and chain that to the animation that will reveal the elements. This is a working example for you in PURE CSS & HTML:
诀窍是首先执行动画以隐藏所有元素（当页面加载时），并将其链接到将显示元素的动画。这是PURE CSS & HTML 中的一个工作示例：
div.slideIn {
position: absolute;
top: 200px;
width: 100px;
height: 100px;
border: 1px solid black;
animation-name: hide, slideIn;
animation-duration: 5s;
animation-timing-function: ease-in;
animation-iteration-count: 1;
-moz-animation-name: hide, slideIn;
-moz-animation-duration: 5s;
-moz-animation-timing-function: ease-in;
-moz-animation-iteration-count: 1;
-webkit-animation-name: hide, slideIn;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-o-animation-name: hide, slideIn;
-o-animation-duration: 5s;
-o-animation-timing-function: ease-in;
-o-animation-iteration-count: 1;
opacity: 1;
}
div.slideIn.first {
left: 50px;
animation-delay: 0s, 0s;
-moz-animation-delay: 0s, 0s;
-webkit-animation-delay: 0s, 0s;
-o-animation-delay: 0s, 0s;
}
div.slideIn.second {
left: 150px;
animation-delay: 0s, 2s;
-moz-animation-delay: 0s, 2s;
-webkit-animation-delay: 0s, 2s;
-o-animation-delay: 0s, 2s;
}
div.slideIn.third {
left: 250px;
animation-delay: 0s, 4s;
-moz-animation-delay: 0s, 4s;
-webkit-animation-delay: 0s, 4s;
-o-animation-delay: 0s, 4s;
}
@keyframes hide
{
from { opacity: 0; } to { opacity: 0 }
}
@-moz-keyframes hide
{
from { opacity: 0; } to { opacity: 0 }
}
@-webkit-keyframes hide
{
from { opacity: 0; } to { opacity: 0 }
}
@-o-keyframes hide
{
from { opacity: 0; } to { opacity: 0 }
}
@keyframes slideIn
{
0% { opacity: 0; top: -100px; }
1% { opacity: 1; top: -100px; }
100% { opacity: 1; top: 200px; }
}
@-moz-keyframes slideIn
{
0% { opacity: 0; top: -100px; }
1% { opacity: 1; top: -100px; }
100% { opacity: 1; top: 200px; }
}
@-webkit-keyframes slideIn
{
0% { opacity: 0; top: -100px; }
1% { opacity: 1; top: -100px; }
100% { opacity: 1; top: 200px; }
}
@-o-keyframes slideIn
{
0% { opacity: 0; top: -100px; }
1% { opacity: 1; top: -100px; }
100% { opacity: 1; top: 200px; }
}
]
<div class="slideIn first">I slid in</div>
<div class="slideIn second">I'm 2nd</div>
<div class="slideIn third">I'm 3rd</div> Note: Remove the 1% line from the slideIn animation to fade in while sliding in.
Note: IE does not support CSS3 animations yet.
注意：从slideIn 动画中删除1% 线以在滑入时淡入。
注意：IE 尚不支持CSS3 动画。
回答by Eliran Malka
What you probably are looking for are animation callbacksfor CSS transitions. Fabrizio Stelluto wrote a great articleon the topic, demonstrating several approaches for tackling this very issue.
您可能正在寻找的是CSS 过渡的动画回调。Fabrizio Stelluto 写了一篇关于这个主题的精彩文章，展示了解决这个问题的几种方法。
If you are using jQuery, you can avoid the overhead of feature detection (sniffing) as a pluginhas already been written (of course...) for this purpose. You can use it to chain CSS transitions much like you would normally do using JavaScript animation calls under jQuery, i.e. using the animation callbacks to invoke additional callbacks.
如果您使用 jQuery，您可以避免特征检测（嗅探）的开销，因为已经为此编写了一个插件（当然......）。您可以使用它来链接 CSS 转换，就像您通常在 jQuery 下使用 JavaScript 动画调用所做的那样，即使用动画回调来调用其他回调。
In addition, several questions had been posted here on StackOverflow which you may find of use:
此外，在 StackOverflow 上发布了几个问题，您可能会发现这些问题：
回答by ROFLwTIME
Using a framework such as jQuery Transit, you can accomplish this with the following:
使用诸如jQuery Transit 之类的框架，您可以通过以下方式完成此操作：
Javascript:
Javascript：
$(document).ready(function () {
showDiv($('div:first'));
function showDiv(div) {
div.transition({
opacity: 1
}, 1000, function () {
//call back
showDiv(div.next("div"));
});
}
});
HTML:
HTML：
<div></div>
<div></div>
<div></div>
CSS:
CSS：
div {
margin: 20px;
width: 100px;
height: 100px;
background-color: black;
float: left;
opacity: 0;
}
