简介

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. js 响应事件

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 三种“BIOS设置光驱第一启动的图解”

    除特殊机器类型一般都是“开机按DEL进入BIOS界面,当然还有AMD主板有按F2的进入” 第一种.AWARD BIOS设置光驱启动方法: 进入Bios界面,选第二项——>回车 选中此项,按PAG ...

  3. BZOJ 1688: [Usaco2005 Open]Disease Manangement 疾病管理 状压DP + 二进制 + 骚操作

    #include <bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) #defin ...

  4. 崂山白花蛇草水 权值线段树套KDtree

    Description 神犇Aleph在SDOI Round2前立了一个flag:如果进了省队,就现场直播喝崂山白花蛇草水.凭借着神犇Aleph的实 力,他轻松地进了山东省省队,现在便是他履行诺言的时 ...

  5. Day7 字符串和常用数据结构

    字符串和常用数据结构 使用字符串 第二次世界大战促使了现代电子计算机的诞生,当初的想法很简单,就是用计算机来计算导弹的弹道,因此在计算机刚刚诞生的那个年代,计算机处理的信息主要是数值,而世界上的第一台 ...

  6. 10.shard、replica机制及单node下创建index

    主要知识点     1.shard&replica机制梳理 2.单node环境下创建index的情况     1.shard&replica机制再次梳理     (1)index包含多 ...

  7. 【4】Django 创建第一个模块应用

    大成若缺,其用不弊.大盈若冲,其用不穷.大直若屈.大巧若拙.大辩若讷.静胜躁,寒胜热.清静为天下正 --老子<道德经> 本章内容 创建应用(app) 开发第一个视图(View) URL访问 ...

  8. 使用timthumb.php截取文章缩略图

    wordpress自带的缩略图功能会对每次上传的所有图片根据设置的图片尺寸进行裁剪,并把原图和裁剪后的图片保存在网站空间中,图片只裁剪一次,更改设置的尺寸不会重新生成,这样不仅占用主机空间,以后改版网 ...

  9. LInux下实时网络流量监控工具nload教程

    https://jingyan.baidu.com/article/642c9d340cbef0644a46f72a.html http://blog.csdn.net/u014171641/arti ...

  10. 【ACM】hdu_zs1_1001_水仙花数_201307271504

    水仙花数 Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other)Total Submissio ...