html - 我可以在窗口加载时一次制作一个 css 动画吗？

Question

我试图让一个按钮淡入然后另一个跟进。有什么办法可以实现我想做的事情吗？ 如果有方法或任何文章，请帮助我知道如何在窗口加载时一次一个地制作动画？

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");});

这里是演示:http://jsfiddle.net/pkjfgfpf/

抱歉英语不好，英语不是我的母语。 非常感谢您的帮助。

Answer 1

fadeIn 函数的第二个参数是动画完成后调用的函数。您可以使用它来链接动画，使其仅在前一个动画完成后才发生。查看fadeIn documentation了解详情。

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 (删除了所有不相关的部分)