为了更轻松地处理动画，我首先想对不同的方面进行分类和组织。 每个动画将具有五个参数，并具有一系列潜在值：

 

　　类型 ：单身，团体，相关  顺序 ：顺序，随机，同时  事件 ：加载，滚动，单击，悬停，调整大小等。  尺寸 ：小，中，大  重复 ：不重复，重复

 

　　注意 ：这不是W3C标准，这是我为了保持清晰的个人系统。

 

　　牢记这些参数将有助于我们制作更好的动画。 我们将一一介绍这五件事。 之后，我将向您展示如何结合使用jQuery和animate.css来动画化网络上的任何内容。

 

　　在某些情况下，您需要为一件事做动画。

 

　　有时候，您需要为分组元素（兄弟姐妹）制作动画，例如：图标，图库中的图像，单行中的列等。

 

　　或者您可能需要为相关元素设置动画； 彼此之间没有直接兄弟姐妹关系的人。

 

　　动画序列可以通过动画延迟来控制。 延迟可能会使事情发生时间，使动画顺序发生。 您可能希望事情随机发生，或者您希望两个或多个元素同时进行动画处理。

 

　　动画可以在网络世界中的任何已知事件上发生：页面滚动，页面加载，单击，悬停，调整大小等。 只要每个动画都是在正确的动画上计划并执行的，事件类型就无关紧要。 在演示中，我们将稍后进行演示，我们将使用页面滚动，在元素进入视口时触发元素上的动画。

 

　　大小是一个相对术语。 动画的“大小”可以解释为与其持续时间，其物理尺寸或其运动值有关。 为小元素设置动画的速度可能与为大元素设置动画的速度不同。 这完全取决于解释，但是“大小”对于最终结果而言很重要。

 

　　在计划动画时，还应该计划动画周期。 每个事件应重复多少次。

 

　　我们将对（长）页面上的各种元素应用一系列动画。 我们将编写一些jQuery来计算元素何时进入视口，然后使用该代码将一个类添加到有问题的一个或多个元素中。 这将触发animate.css库，执行我们想要的任何动画。

 

　　您可以从仓库下载源文件 ，更改所需的任何值，然后在自己的基本HTML模板中使用。 或者，您可能更喜欢叉子笔 。 不管您的喜好如何，以下都是对发生情况的解释。

 

　　让我们先看一下实际的演示，这样您就知道要做什么：

 

　　因此，首先，我们需要四个jQuery函数，这些函数将放入controller.js文件或JS窗格（如果您使用的是CodePen）中。 让我们仔细看看每个。

 

　　此功能检测元素是否在窗口的视口中。 它接受一个参数（0-1），该参数告诉函数应该在视口中的元素的最小部分。 默认情况下，这是元素的40％（0.4）。 这是整体外观：

 

　　下一个功能是为给定的一组元素设置随机动画延迟。 它用于分组动画，并接受三个参数：

 

　　：元素集的选择器   ：最大动画延迟   ：最小动画延迟

 

　　看起来是这样的：

 

　　此功能与上一个功能非常相似，不同之处在于，它用于向一组给定的元素添加顺序延迟。

 

　　它带有两个参数：

 

　　：元素集的选择器   ：集合中元素之间的延迟的最小常数。

 

　　这里是：

 

　　最后一个功能非常丰富。 它将类添加到目标元素或元素组并发送动画数据。