初见animate.css的时候,感觉很棒,基本上很多常用的CSS3动画效果都帮我们写好了,所以想要哪一种效果直接就可以拿过来用,甚是方便:

效果展示官网:http://daneden.github.io/animate.css/

github下载地址:https://github.com/daneden/animate.css

那么如何使用呢?

首先,我们在head标签内引入我们下载好的animate.css文件:

<link rel="stylesheet" type="text/css" href="css/animate.css">

然后,在你需要设置动画效果的元素标签内先添加一个animated的类,这里拿h1做例子:

<h1 class="animated">hello world</h1>

如果你想让你的动画效果一直循环,则再添加一个infinite的类:

<h1 class="animated infinite">hello world</h1>

接下来就是根据你具体想实现哪一种动画效果而添加相对应的类即可!我一般是去http://daneden.github.io/animate.css/这里找到某一分组,然后挑一些尝试一下动画效果是怎样的,如果觉得合适就直接把类名添加到标签里就OK了,比如,我这里选了一个淡出的效果:

<h1 class="animated infinite fadeOut">hello world</h1>

这样h1标签就会不停地呈现淡出的效果,但是不一定要添加infinite类,这个根据个人需要设置,默认是一次。

但是,一般我们是通过事件或设置定时器来触发动画效果的,比如点击,悬浮,获取焦点,移入移出等等这些事件来触发我们动画效果的呈现,这样的话我们就可以使用JQuery来实现:

$(".test").click(function(){
$(this).addClass('animated fadeOut');
});

当然,你可以检测当此动画结束时来执行某一函数,one()表示只执行一次:

$('.test').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

最后,我们想要的效果有了,但是如果你对动画的默认配置参数不满意,比如持续时间,延迟时间,执行次数等,那么我们自己可以自定义,只要能覆盖掉animate.css的默认属性值就行,需要添加各浏览器前缀:

.test{
-webkit-animation-duration: 3s;
-webkit-animation-delay: 4s;
-webkit-animation-iteration-count:; -moz-animation-duration: 3s;
-moz-animation-delay: 4s;
-moz-animation-iteration-count:; -o-animation-duration: 3s;
-o-animation-delay: 4s;
-0-animation-iteration-count:; -ms-animation-duration: 3s;
-ms-animation-delay: 4s;
-ms-animation-iteration-count:; animation-duration: 3s;
animation-delay: 4s;
animation-iteration-count:;
}

很方便吧!

CSS3动画库——animate.css的更多相关文章

  1. 强大的CSS3动画库animate.css

    今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...

  2. 使用CSS3动画库animate.css

    IE9及更早版本的IE浏览器都不支持css3动画 谷歌浏览器.火狐浏览器.IE10+浏览器以及移动端浏览器等这些都支持css3动画 animate.css内置了很多典型的css3动画   用法   1 ...

  3. CSS3动画库animate.css

    在线演示 本地下载

  4. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  5. 转: css3动画简介以及动画库animate.css的使用

    ~~~ transition  animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...

  6. 【转载】css3动画简介以及动画库animate.css的使用

    原文地址:http://www.cnblogs.com/2050/p/3409129.html 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好. ...

  7. 如何使用动画库animate.css

    animate.css是一个CSS3动画库,里面预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeI ...

  8. 动画库animate.css的用法

    简介 animate.css是一个来自国外的 CSS3 动画库,它预设了引起弹跳(bounce).摇摆(swing).颤抖(wobble).抖动(shake).闪烁(flash).翻转(flip).旋 ...

  9. CSS动画库——animate.css的使用

    Animate.css是一款强大的CSS3动画库 官网地址:https://daneden.github.io/animate.css/ 使用方法如下所示: (1)下载animate.css 下载地址 ...

随机推荐

  1. 我觉得epoll和select最大的区别

    最近在用epoll,网速资料很多,大家都说epoll和select的区别比较大,而且select要不停遍历所有的fd,效率要低,而且fd有限制. 但是我认为二者最大的区别在于 先看代码 while ( ...

  2. 小程序:将gbk转为utf-8

    是否有过写了半天代码,发现竟然用的GBK编码,然后到主UTF-8上发现中文全部变成乱码了... 下面这个程序,只要输入src的位置,瞬间转换成utf-8 package tools; import j ...

  3. JavaWeb温习之Session对象

    1. Session简单介绍 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下).因此,在需要保存用户数据时,服 ...

  4. shell脚本备份日志

    #!/bin/sh # back tomcat catalina.out cd /home/log_bak #the file DATE=`date '+%Y%m%d-%H%M'` ARCHIVE=$ ...

  5. nginx如何利用自定义的conf文件启动?

    1.进入nginx的安装目录; 2.nginx -s -c conf/my.conf  (校验该文件是否有效)   nginx -s -c conf/my.conf 命令会卡死,存疑 3.start ...

  6. java定时器学习

    一.这个是利用jdk自带的Thread类的sleep方法实现定时执行任务. package tasker; import java.util.Date; public class tasker01 e ...

  7. 微信小程序 --- 完成小程序支付功能

    最近开发小程序,一直在看小程序的支付.经过一天的努力,小程序支付功能最终实现了. 下面感谢 csdn 博主:千堆雪惹尘埃 发布的 " 小程序与php 实现微信支付 " 原文地址: ...

  8. 170714、springboot编程之多数据源切换(动态)

    (1)新建maven java project; 新建一个maven project,取名为:spring-boot-multi-ds (2)在pom.xml添加依赖包: 在pom.xml文件中加入依 ...

  9. Lucene.net的简单使用

    一.Lucene.net的简单介绍 1.为什么要使用Lucene.net       使用like的模糊查询,模糊度太低,中间添加几个字就无法查找.同时会造成数据库的全文检索,效率低下,数据库服务器造 ...

  10. Treasure Exploration---poj2594(传递闭包Floyd+最小路径覆盖)

    题目链接:http://poj.org/problem?id=2594 在外星上有n个点需要机器人去探险,有m条单向路径.问至少需要几个机器人才能遍历完所有的点,一个点可以被多个机器人经过(这就是和单 ...