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>中引入样式文件: & ...
随机推荐
- DRF项目之实现用户密码加密保存
在DRF项目的开发中,我们通过直接使用序列化器保存的用户信息时,用户的密码是被明文保存到数据库中. 代码实现: def create(self, validated_data): '''重写creat ...
- 048-PHP定义常量
<?php define('NUM',123); //定义常量NUM echo NUM; //输出NUM的值 define('STR','ABC',TRUE); //定义常量STR并设置大小写不 ...
- [题解] CF932E Team Work
CF932E Team Work 你现在手里有\(n\)个人,你要选出若干个人来搞事情(不能不选),其中选择\(x\)个人出来的代价是\(x^k\),问所有方案的代价总和. 数据范围:\(1\le n ...
- cf 507E. Breaking Good
因为要求是在保证最短路的情况下花费是最小的,所以(先保证最短路设为S吧) 那么花费就是最短路上的新建边条数A+剩余拆掉边的条数B,而且总的原有好的边是一定的,所以,只要使得A尽量小,那么B就大,所以要 ...
- sql 常用的语句（sql 创建表结构 修改列 清空表）
1.创建表 create Table WorkItemHyperlink ( ID bigint primary key ,--主键 WorkItemID ,) not null,--其中identi ...
- python3+Opencv 搭建环境和基本操作
一.必备前提: Python3.5及以上版本.pip.windows环境 二.搭建opencv 该部分可以创建隔绝的Python环境来引入,参照virtualenv的使用 在目标的cmd窗口,依次输入 ...
- It can be a face application using SeetaFace and Qt.
之前编译了一下SeetaFace的库,用于人脸检测.特征点定位和人脸识别的功能,然后昨天就用Qt写了一个软件用于实现. 工程的文件还是比较简单的,一个界面类和一个SeetaFace的线程类而已.这里主 ...
- wepy 小程序定时器（验证码倒计时） 数据绑定页面无刷新
每次改变数据的时候记得调用 this.$apply() 验证码倒计时 使用的vant-weapp UI组件 wxml: <van-col span="10" style= ...
- 系统学习python第一天学习笔记
1.计算机认识 1.常见的操作系统 win xp win7 win10 window server(服务器) linux centos,图形化界面差 ubuntu , 个人开发(图形化比较好) red ...
- 三分钟入坑指北 🔜 Docsify + Serverless Framework 快速创建个人博客系统
之前由于学摄影的关系,为了提高自己的审美,顺便锻炼下自己的英文能力,翻译了不少国外艺术类的 文章.最近一直想搭一个个人博客来存放这些内容,又懒得折腾建站,遂一直搁置. 直到偶然发现了 docsify ...