Animate.css 一款强大的预设css3动画库
Animate.css是一个有趣的，跨浏览器的css3动画库。很值得我们在项目中引用。
用法
1、首先引入animate css文件
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
2、给指定的元素加上指定的动画样式名
<div class="animated bounceOutLeft"></div>
这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。
3、如果说想给某个元素动态添加动画样式，可以通过jquery来实现：
$('#yourElement').addClass('animated bounceOutLeft');
4、当动画效果执行完成后还可以通过以下代码添加事件
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：
$(function(){
$('#jq22').addClass('animated bounce');
});
有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：
$(function(){
$('#jq22').addClass('animated bounce');
setTimeout(function(){
$('#jq22').removeClass('bounce');
}, 1000);
});
animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：
#jq22{
animate-duration: 2s; //动画持续时间
animate-delay: 1s; //动画延迟时间
animate-iteration-count: 2; //动画执行次数
}
转载自：http://www.jq22.com/jquery-info819
Animate.css 一款强大的预设css3动画库的更多相关文章
- Animate.css 一款牛逼的css3动画库
Animate.css是一款很牛逼的,跨浏览器的css3动画库,使用方法也很简单只要引入一个animate.min.css就可以了, 简单使用 1 首先引入 animate的 css 文件样式 cdn ...
- animate.css – 齐全的CSS3动画库
animate.css – 齐全的CSS3动画库 演 示 下 载 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounc ...
- animate.css –齐全的CSS3动画库--- 学习笔记
animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...
- 强大的CSS3动画库animate.css
今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...
- 腾讯开源的轻量级CSS3动画库：JX.Animate
JX.Animate 是由腾讯前端团队 AlloyTeam 推出的一个 CSS3 动画库,通过 JX(腾讯的前端框架)插件的形式提供. Why CSS3 众所周知在支持HTML5的浏览器中 ...
- CSS3 Animation Cheat Sheet：实用的 CSS3 动画库
CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...
- Css3动画库收集
1.animate.css – 齐全的CSS3动画库 http://www.dowebok.com/98.html 2.Angular官方动画库 http://augus.github.io/ngAn ...
- CSS3 -- 动画库
http://www.jq22.com/yanshi819 文件结构: html <!DOCTYPE html> <html lang="zh-CN"> & ...
- Animate.css(一款有意思的CSS3动画库)
官网:https://daneden.github.io/animate.css/ animate.css 是一款跨浏览器的动画库. 使用方式: 在页面的 <head>中引入样式文件: & ...
随机推荐
- xargs详细
转自 http://czmmiao.iteye.com/blog/1949225 简介之所以能用到这个命令,关键是由于很多命令不支持|管道来传递参数,而日常工作中有有这个必要,所以就有了xargs命 ...
- 148-PHP strip_tags函数，剥去字符串中的 HTML 标签（二）
<?php //定义一段包含PHP代码的字符串 $php=<<<PHP 这里是PHP代码的开始 <?php echo "hello!"; PHP; $ ...
- （五）selenuim和phantonJs处理网页动态加载数据的爬取
selenuim和phantonJs处理网页动态加载数据的爬取 一 图片懒加载 自己理解------就是在打开一个页面的时候,图片数量特别多,图片加载会增加服务器的压力,所以我们在这个时候,就会用到- ...
- oracle将字符串根据特定字符串拆分为多个子字符串
将 字符串 '20180321-4768-4735261' 按‘-’ 拆分: 语法: INSTR()函数 1.用处: 在一个字符串中查找指定的字符,返回被查找到的指定的字符的位置. 2.语法格式: ...
- centos破解压缩文件密码
rarcrack是linux系统端的一款破解加密压缩包的工具,rarcrack使用的穷举法进行破解已经加密的rar.zip和7z压缩包,支持设置多线程,和文件类型进行破解. 1.rarcrack下载页 ...
- windows driver 延时
#define Delay_One_MicroSecond (-10) #define Delay_One_MilliSecond (Delay_One_MicroSecond * 1000) voi ...
- mybatis初步配置容易出现的问题
The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone. You ...
- cf 525D.Arthur and Walls
判断2*2的正方形,是不是3个"."1个"*"然后暴力bfs就好.(这种处理也是挺神奇的2333%%题解) #include<bits/stdc++.h& ...
- UVALive 6763 / CSU 1446
今天比赛的时候拿到的第一道题,其实挺简单的,求两等差序列中相同元素的个数,我想了一下就觉得,只要找到了第一个相等的点,然后后面求最大公约数就可以直接得到结果了 网上叫什么拓展欧几里得,我反正是按照我们 ...
- 直线电机设计与优化(TFLM,FSLM)论文阅读笔记3
2.21-(2.7论文引出)傅里叶对开关磁通电机建模 Modeling of Flux Switching Permanent Magnet Machines With Fourier Analysi ...