详细信息
animo.js 是一个令人惊叹的 jQuery 插件，它提供了一种简单的方法来管理具有特殊效果的硬件加速 CSS3 动画，例如堆栈动画、跨浏览器模糊、旋转、反弹、动画完成时的回调等。
也可以看看：
用于硬件加速 CSS3 动画的 jQuery 插件 - Minimit Anima
令人惊叹的 CSS 框架，用于使用 jQuery 的 CSS3 动画
基本用法：
1. 在您的网页上包含 jQuery 库 2.0+ 和 jQuery animo.js 脚本
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="animo.js" type="text/javascript"></script>2. 在您的网页上包含所需的 jQuery animo.js 样式表
<link href="animate+animo.css" rel="stylesheet" type="text/css">3. 为 Tada 和 Bounce 动画创建 html
<div id="demo" style="height:100px;width:100px;background:#34495e"></div>
<button onclick="$('#demo2').animo({animation: ['tada', 'bounce'], duration: 2});">Tada and Bounce</button>4. 设置
// <a href="https://www.jqueryscript.net/animation/">Animation</a>s
$(element).animo({
// [string]/[array] class name(s) of the css animation,
animation: "name", // or ["name1", "name2", "name3"]
// [float] time (in seconds) for the animation to last during 1 iteration
duration: 0.8,
// [int] number of times the animation shall repeat itself
iterate: 1,
// [string] how the animation should progress over the duration of each cycle
timing: "linear",
// [boolean] whether or not to "cleanse" the element after the animation has completed
keep: false
} [,function]);
// Blur
// Specifying options
$(element).animo("blur", {
// [int] radius of the blur
amount: 3,
// [float] time (in seconds) from focus to blur
duration: 0.6,
// [float] time (in seconds) to automatically focus after blur
focusAfter: 3.5,
} [,function]);
// Using defaults
$(element).animo("blur" [,function]);
// Rotate
// Specifying options
$(element).animo("rotate", {
// [int] degrees from origin to rotate element
degrees: 15,
// [float] time (in seconds) to complete rotation
duration: 0.6
} [,function]);
// Using defaults
$(element).animo("rotate" [,function]);
// Focus
// Removes blur effect on an element immediately
$(element).animo("focus");
// Cleanse
// Removes all references to animo effects
$(element).animo("cleanse");
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。