Can i make css animation one at a time when window load? - html

Question

I tried to make one button fade in then the other follow up. Is there any way that i can achieve wat i trying to do?
if there is way or any article, please help me know how to make one by one button animate at a time when window load?
HTML
<li class="li">
<a href="">
<img class="image" src="http://templateafiq1.site88.net/button/about%20me.png">
</a></li>
<li class="li">
<a href="">
<img class="image" src="http://templateafiq1.site88.net/button/about%20me.png">
</a></li>
</center>
</ul>
</font>
CSS
div header{
width:100%;
height:50px;
top:50px;
position:fixed;}
header .image{
height:110px;
width:110px;
opacity:0;
-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-webkit-animation-delay: 2s;
-o-animation: fadein 2s;
animation-timing-function:linear;
animation-fill-mode:forwards;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:1s;
-webkit-animation-fill-mode: forwards;}
#header .ul{
list-style-type: none;
position:fixed;
top:17px;
width:100%;}
header .li {
height:110px;
width:110px;
padding:1px;
display:inline;
z-index:1;}
#header .li a{
text-decoration:none;
height:110px;
width:110px;}
//Fade in effect
#keyframes fadein {
0% {opacity:0;}
100% {opacity:1;}}
#-moz-keyframes fadein {
0% {opacity:0;}
100% {opacity:1;}}
#-webkit-keyframes fadein {
0% {opacity:0;}
100% {opacity:1;}}
#-o-keyframes fadein {
0% {opacity:0;}
100% {opacity:1;}}
Javascript
$(window).load(function() {
$("#header.image").fadeIn("fast");});
here the demo : http://jsfiddle.net/pkjfgfpf/
Sorry for the bad english, english is not my native language.
Thank you so much for your help.

Answer 1

The second argument to the fadeIn function is a function to call once the animation is complete. You can use this to chain animations to only happen after a previous animation is complete. See the fadeIn documentation for details.
HTML:
<img class="image" id="img1" src="imageUrl.filetype" />
<img class="image" id="img2" src="imageUrl.filetype" />
<img class="image" id="img3" src="imageUrl.filetype" />
JQuery:
$("#img1").fadeIn("slow", function() {
$("#img2").fadeIn("slow", function() {
$("#img3").fadeIn("slow");
});
});
CSS:
.image {
display: none;
}
Example JSFiddle (with all non-relevant parts removed)

Answer 2

Probably this could be your solution, Adjust it in your code (see the example here http://jsfiddle.net/nepal12/8jjooaox/)
// HTML
<div id="images">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
</div>
// Css
div#images { font-size: 0; background: #000; }
div#images img { width: 50%; height: auto;
opacity: 0; transition: .8s opacity; }
div#images img.visible { opacity: 1; }
// Javascript
<script>
var images = document.querySelectorAll("#images img"), i = 1;
Array.prototype.forEach.call(images, function(images) {
setTimeout(function(){ images.classList.add("visible") }, 700*i)
i++;
})
</script>

Answer 3

Change this:
$('#header.image').fadeIn('fast');
To:
$('.image').each(function(index,domEle){
setTimeout(function ( ) {
if(domEle.style.webkitAnimationPlayState!=undefined && domEle.style.webkitAnimationPlayState != null)
{
domEle.style.webkitAnimationPlayState = 'running'
}
if(domEle.style.mozAnimationPlayState!=undefined && domEle.style.mozAnimationPlayState != null)
{
domEle.style.mozAnimationPlayState = 'running'
}
if(domEle.style.oAnimationPlayState!=undefined && domEle.style.oAnimationPlayState != null)
{
domEle.style.oAnimationPlayState = 'running'
}
if(domEle.style.msAnimationPlayState!=undefined && domEle.style.msAnimationPlayState != null)
{
domEle.style.msAnimationPlayState = 'running'
}
if(domEle.style.animationPlayState!=undefined && domEle.style.animationPlayState != null)
{
domEle.style.animationPlayState = 'running'
}
},index*2000);
});
At your CSS styles simply add the following:
header .image{
animation-play-state:paused;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
}
sample Fiddle http://jsfiddle.net/pkjfgfpf/