使用 jQuery 和 animate.css 动画 Html 元素 - Animate-Plus.js

版本:

浏览量:1276

最后更新：2021-09-07

推荐指数:

查看演示点击下载

详细信息

Animate-Plus.js 是一个与animate.css一起使用的 jQuery 插件，它允许您在任何 Html 元素上应用多个跨浏览器的 CSS3 动画。

所有动画选项都可以通过 Html5data-animation-*属性传递，因此您无需编写任何 Javascript 即可创建出色的动画。

基本用法：

1. 在您的文档中包含所需的 jQuery javascript 和 animate.css。

<link rel="stylesheet" href="css/animate.css" />
<script src="jquery.min.js"></script>

2. 确保在 jQuery 库之后包含 animate-plus.js。

<script type="text/javascript" src="animate-plus.js"></script>

3. 创建一个带有“animate-plus”CSS 类的Html 元素，并使用data-animation-*属性定义CSS3 动画。所有动画类型都可以在animate.css.

<span class="animate-plus" data-animations="bounceIn,shake,fadeOutRight,fadeIn">Animate-plus.js</span>

4.所有的Html5data-animation-*属性。

数据动画：逗号分隔的动画名称列表。默认情况下，动画从左到右执行。有效值为 animate.css 类名。这是唯一必需的属性。
data-animation-group: Name of the animation group. You can group animated elements using this attribute. Please refrain from using names that begin with an underscore (_), that's reserved for internal use.
data-animation-order: List of comma delimited integer values. You can override the order of animation inside a group using the attribute.
data-animation-duration: List of comma delimited duration values. This attribute will set the duration for the specified animations. For valid values see animation-duration css property.
data-animation-delay: List of comma delimited delay values. This attribute will set how many time to wait before executing the animations. For valid values see animation-delay css property.
data-animation-when-visible: Animate group only when visible on screen (binds on scroll and resize). This will begin animation as soon as one group element is visible. Valid value is true.
data-animation-reset-offscreen: Reset animation when group goes off screen. The group will be reseted as soon as one group element goes off screen. This attribute only has effect when used together with data-animation-when-visible. Valid value is true.
data-animation-repeat: Loop animation group indefinitely. Valid value is true.