Question

我想在加载页面时为3个div添加动画。

当页面加载时，这3个圆圈应来自右边的动画。

这是我的HTML -

<div id="wrapper" class="clearfix">
    <div id="content">
        <div id="div1"></div>           
        <div id="div2"></div>           
        <div id="div3"></div>
    </div>
</div>

这是My FIDDLE HTML和CSS

任何人都可以帮我用jQuery添加动画。

Answer 1

这里绝对不需要JavaScript / jQuery。

只需使用CSS3就可以了。

检查 updated fiddle

<强> CSS

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}

.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}

HTML （已添加的课程）

    <div id="wrapper" class="clearfix">
        <div id="content">
            <div id="div1" class="fade-in one"></div>           
            <div id="div2" class="fade-in two"></div>           
            <div id="div3" class="fade-in three"></div>
        </div>
    </div>

你可以用CSS做很多动画......如果你不喜欢淡入淡出你可以选择一些其他的动画，甚至可以组合一对（每个div都有不同的动画）

jQuery Example 以及

享受！

Answer 2

使用jquery animate http://api.jquery.com/animate/。在文档就绪状态下调用JavaScript函数

如何向此添加动画？

2 个答案: