css chain transition animation
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:
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.
What you probably are looking for are animation callbacks for CSS transitions. Fabrizio Stelluto wrote a great article on the topic, demonstrating several approaches for tackling this very issue.
If you are using jQuery, you can avoid the overhead of feature detection (sniffing) as a plugin has 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.
In addition, several questions had been posted here on StackOverflow which you may find of use:
- Callback on CSS transition
- Is there a callback on completion of a CSS3 animation
- Callback when CSS3 transition finishes
Using a framework such as jQuery Transit, you can accomplish this with the following:
Javascript:
$(document).ready(function () {
showDiv($('div:first'));
function showDiv(div) {
div.transition({
opacity: 1
}, 1000, function () {
//call back
showDiv(div.next("div"));
});
}
});
HTML:
<div></div>
<div></div>
<div></div>
CSS:
div {
margin: 20px;
width: 100px;
height: 100px;
background-color: black;
float: left;
opacity: 0;
}