使用基本的代码

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>css</title>

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

	</head>

	<body>

		<div class="animated fadeInLeft">111212</div>

</html>

属性如下：

bounce 弹起；反弹
flash 闪光
pulse 脉冲
rubberBand 橡皮圈
shakeX x动摇
shakeY y动摇
headShake 摇头
swing 摇摆；悬挂
tada
wobble 摇摆
jello
heartBeat 跳动

Back entrances 回到入口

backInDown
backInLeft
backInRight
backInUp

Back exits 后退

backOutDown
backOutLeft
backOutRight
backOutUp

Fading entrances 淡入入口

fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeInTopLeft
fadeInTopRight
fadeInBottomLeft
fadeInBottomRight

Fading exits 淡入退出

fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
fadeOutTopLeft
fadeOutTopRight
fadeOutBottomRight
fadeOutBottomLeft

Flippers

flip
flipInX
flipInY
flipOutX
flipOutY

Lightspeed

lightSpeedInRight
lightSpeedInLeft
lightSpeedOutRight
lightSpeedOutLeft

Rotating entrances 旋转入口

rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight

Rotating exits 选择退出

rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight

Specials

hinge
jackInTheBox
rollIn
rollOut

Zooming entrances 上升入口

zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp

Zooming exits 上升出口

zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

Sliding entrances 滑；移动 出口

slideInDown
slideInLeft
slideInRight
slideInUp

Sliding exits 滑；移动入口

slideOutDown
slideOutLeft
slideOutRight
slideOutUp

这些属性可以自己去试试，可以去更改一下，很简单的，自己调用的一个库

http://www.jq22.com/yanshi819打开这个看每一个的属性的特效

Animate..css的一些属性使用的更多相关文章

  1. CSS3动画库——animate.css

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

  2. animate.css（第三方动画使用方法）

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...

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

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

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

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

  5. Animate.css让添加CSS动画像喝水一样容易

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

  6. JQuery插件之Animate.css和 jquery-aniview

    Animate.css 一款强大的预设css3动画库 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(fl ...

  7. animate.css – 齐全的CSS3动画库

    animate.css – 齐全的CSS3动画库 演 示 下 载   简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounc ...

  8. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  9. WOW.js和animate.css让页面滚动时显示动画

    官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

随机推荐

  1. Linux三剑客grep、awk、sed

    何为Linux三剑客? 第一个剑客是 grep,grep 会根据正则表达式查找相关内容并打印对应的数据. 第二个剑客是 awk,awk 的名字来源于三个作者的名字简称,它可以根据定位到的数据行处理其中 ...

  2. 2020.7.19 区间dp阶段测试

    打崩了-- 事先说明,今天没有很在状态,所以题解就直接写在代码注释里的,非常抱歉 T1 颜色联通块 此题有争议,建议跳过 题目描述 N 个方块排成一排,第 i 个颜色为 Ci .定义一个颜色联通块 [ ...

  3. P5665 划分

    Part 1 先来看一个错误的贪心做法:假设当前结尾的一段和为 \(a\),等待加入结尾的一段和为 \(b\),现在要处理新进来的数 \(c\). \(a\leq b\),将 \(a\) 算入答案,将 ...

  4. Java基础教程——转换流

    转换流 通常,Window默认的编码方式是GBK,Java项目一般建议设为UTF-8编码.这时候读取文件可能出现乱码.事实上实际应用中编码格式不匹配的场景非常多. 转换流可以指定编码方式,用于解决乱码 ...

  5. 使用acme.sh从Let's Encrypt申请SSL证书

    Let's Encrypt 简介 Let's Encrypt是一个于2015年三季度推出的数字证书认证机构,旨在以自动化流程消除手动创建和安装证书的复杂流程,并推广使万维网服务器的加密连接无所不在,为 ...

  6. Unity使用transform.Translate()移动子物体时遇到的小问题

    Unity使用transform.Translate()移动子物体时遇到的小问题 情况大概是这样:父物体A下有子物体B,希望使B在本地坐标系下移动1单位. B物体挂脚本代码如下: transform. ...

  7. 【GDKOI2014】JZOJ2020年8月13日提高组T2 石油储备计划

    [GDKOI2014]JZOJ2020年8月13日提高组T2 石油储备计划 题目 Description Input Output 对于每组数据,输出一个整数,表示达到"平衡"状态 ...

  8. 关于open函数文件打开模式的有意思的一个现象

    老猿前阵子学习了文件IO,最近正在回顾及进行各种验证和总结,老猿在对文件进行打开后的返回值检查属性时,发现文件打开返回的文件对象的读写模式与打开文件的模式并不完全相同,如下案例: fp1 = open ...

  9. PyQt(Python+Qt)学习随笔：formLayout的layoutRowWrapPolicy属性

    Qt Designer的表单布局(formLayout)中,layoutRowWrapPolicy用于控制表单布局中表单行的标签和输入部件之间是否换行.如图: 上图中蓝色标记圈起来的下拉列表数据是其可 ...

  10. java视频流的断点续传功能

    项目中需要实现浏览器中视频的拖动问题解决 /** * 视频文件的断点续传功能 * @param path 文件路径 * @param request request * @param response ...