Question

我正在开发一个rails应用程序，其中我的设计就像在图像中显示一样有四点，我希望他们一个接一个地来。（如第一点出现，比第二点等）

this image

我从来没有像这样工作，所以我不知道该怎么做。

我看过一些关于动画的教程，我发现它就像移动盒子，改变颜色。

请引导我走向正确的方向。

Answer 1

你可以通过像stagger.css

这样的东西来实现这一点

http://digitalfio.github.io/Stagger.css/

在<head>中包含css文件，将动画类应用于每个div，然后以下划线的形式向每个div添加一个计时类，后跟一个递增的数字 - 例如

<div class="animated slideIn _1"></div>
<div class="animated slideIn _2"></div>
<div class="animated slideIn _3"></div>
<div class="animated slideIn _4"></div>

所以你得到这样的东西：http://output.jsbin.com/cusuz/4

Answer 2

逐步使用javascript增加div宽度

<div style="width:100px;height:100px;overflow:hidden;">
    <img src="yourimage" />
</div>

动画子弹让他们一个接一个地来

2 个答案: