一、简介

辅助我们实现页面的的一些动画效果，比如抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等。不需要我们自己写jq代码，该库都封装好了，我们只需要引用并调用就行，大大降低了我们的工作量。

二、获取地址

官网：http://www.animate.net.cn/
下载文件地址（下方是使用方法）：https://www.dowebok.com/98.html
查看效果（这个很棒，点击即可复制）：https://animate.style/

三、案例展示

1.目录结构展示：

2.代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jQuery.min.js"></script><link rel="stylesheet" href="./css/animate.min.css">
</head><body><div id="dowebok">测试</div><script>$(function() {$('#dowebok').click(function() {$(this).addClass('animated flipOutX'); //这个animated是必须要写的，不写不生效。setTimeout(function() { //完成此动画之后，把动画类名移除掉，这样再点击又能添加类名，执行动画。$('#dowebok').removeClass('animated flipOutX');}, 1000);})});</script>
</body></html>

3.效果展示（此时是点击触发）

4.如果想让动画默认无限循环展示，只需要添加一个类名即可：infinite。
代码：

<!-- 第一个类名是必写参数、第二个类名是动画名称（此时是抖动）、第三个类名控制无限循环。 -->
<div id="dowebok" class="animated shake infinite">测试
</div>

效果演示：

四、总结

所有内容均在官网上，可自行探索。
动画只需要引入animate.min.css即可，如果后面想用jq控制元素，需要再将jq.min.js引入进来。
无限循环需要添加类名：infinite。

animate动画库的使用步骤相关推荐

html中如何设置动画鼠标,使用animate动画库添加鼠标经过动画
使用animate动画库添加鼠标经过动画蓝叶网站设计 2016-11-27 11679 4评论 animate是一个css3动画库,使用它简单几步就能很轻松的为网站增加各种 ...
#前端开发# 【一】之Animate动画库的安装及详细用法
#前端开发# 之Animate动画库的安装及详细用法在前端的开发过程中,我们免不了需要动画来实现更多酷炫效果, 下面主要是介绍Animate这款强大的动画库,以及其安装及使用相信大家也已经了解过A ...
安装使用Animate动画库【Animate.css下载安装教程】
Animate.css官网地址 1.npm安装Animate.css npm install animate.css --save 2.在入口文件main.js中导入 // 导入动画库 import ...
css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
css animation动画完成后隐藏_css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
强大的CSS3动画库animate.css
今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...
css动漫效果库,Animate.css功能强大的纯CSS3动画库 - 资源分享
Animate.css是一个CSS3动画库,他为我们预设了很多可以使用的动画效果,比如弹跳.飘过.滑动.渐变的等特效,简单好用,只需要添加对应的动画Class到元素上,即可调用插件的动画效果,而且支持 ...
animate.css –齐全的CSS3动画库--- 学习笔记
animate.css – 齐全的CSS3动画库学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...
animate inater插件_基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目...
功能简介基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

animate动画库的使用步骤

一、简介

二、获取地址

三、案例展示

四、总结

animate动画库的使用步骤相关推荐

最新文章

热门文章