简介

animate.css是一个来自国外的 CSS3 动画库,它预设了引起弹跳(bounce)、摇摆(swing)、颤抖(wobble)、抖动(shake)、闪烁(flash)、翻转(flip)、旋转(rotate)、淡入淡出(fade)、滑动(Sliding)、光速(lightspeed)、缩放变焦(Zoom)、翻滚(roll)等多达 70 多种动画效果,借助 animate.css 能够很方便、快速的制作 常见的动画效果。当然animate.css只兼容支持 CSS3 animate 属性的浏览器,他们分别是:IE10+、Firefox、Chrome、Opera、Safari。

使用方法

1、引入文件

<link rel="stylesheet" href="animate.min.css">



2、在html中调用

<h1 class="animated bounceOut">Animate.css</h1>

给元素加上class属性,animated是必须加的,bounceOut是动画效果的名称。



也可以使原生JS或得Jquery动态添加使用动画,只要在需要动画的元素的class上加对应的动画名称即可,比如

$(function(){
$('#jqhtml').addClass('animated bounce');
});

animate.css 的默认设置也许有些时候并不是我们想要的,所以你可以重新设置,比如:
```
#jqhtml{
animate-duration: 2s; //动画持续时间
animate-delay: 1s; //动画延迟时间
animate-iteration-count: 2; //动画执行次数
}
```

在线演示

示例

以下是前端库为大家收集的特效

66种基于animate.css的CSS消息提示动画效果

基于magnific-popup.js和animate.css的响应式lightbox特效

基于Animate.css的炫酷jQuery消息通知框插件

SVG文字动画特效插件AnimatedLetters

基于Animate.css的jQuery全屏幻灯片插件

下载地址

http://www.jqhtml.com/910.html

动画库animate.css的用法的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  7. 使用CSS3动画库animate.css

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

  8. 动画库Animate.css

    笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 < ...

  9. CSS3动画库——animate.css

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

随机推荐

  1. token的问题汇总

    token的作用:认证.授权: 生成:随机码.时间戳.用户 设备 合成: 验证:是否存在.合成验证: 管理:有效期(服务器存储时间or cookie存储过期时间).展期. token生成:或者和用户信 ...

  2. Redis 之list链表结构及命令详解

    1.lpush  key   value   从左放一个值 2.rpush  key   value  从右放一个值 3.lrange  key  start   stop  获取链表数据(start ...

  3. Memcached 之增删改查命令

    memcache是高性能 ,分布式的内存对象缓存系统,非关系型数据库. 一.增 语法:add  key  flag  expire  length key:值的一个名字 flag:一个标志,是一个正整 ...

  4. 【转载自JHBlogs的博客】postman接口自动化,环境变量的用法详解(附postman常用的方法)

    在实现接口自动测试的时候,会经常遇到接口参数依赖的问题,例如调取登录接口的时候,需要先获取登录的key值,而每次请求返回的key值又是不一样的,那么这种情况下,要实现接口的自动化,就要用到postma ...

  5. SharePoint Designer 2013 开启新式验证(Modern Authentication)

    首先安装office 2013全家桶 再安装SharePoint Designer 2013 安装完之后,去windows检查更新,并把所有需要更新的都更新了 (更新之后我还通过KMS激活了offic ...

  6. echarts 中 请求后台改变数据

    function tablenumber() { $.ajax({ type : "get", url : "../res/error.json", dataT ...

  7. WERTYU(WERTYU, UVa10082)

    把手放在键盘上时,稍不注意就会往右错一 位.这样,输入Q会变成输入W,输入J会变成输 入K等.键盘如图所示. 输入一个错位后敲出的字符串(所有字母均大写),输出打字员本来想打出的句子.输入保 证合法, ...

  8. Linux—Ubuntu14.0.5安装mongo

    1.安装mongo sudo apt-get install mongo 2.如果遇到找不到安装包运行,那就更新资源列表 sudo apt-get update 3.安装成功会自动运行mongo pg ...

  9. Centos 7 中yum安装Mysql和修改mysql配置

    一. mysql安装 1.安装MySQL官方的Yum Repository [root@ecs-7bec-0002 mysql]# wget -i -c http://dev.mysql.com/ge ...

  10. 38.mapping小例子

    主要知识点 初步了解mapping     一,准备数据 插入几条数据,让es自动为我们建立一个索引     PUT /website/article/1 { "post_date" ...