使用基本的代码

<!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. Mac升级资料丢失怎么办?EasyRecovery能恢复嘛？

    随着越来越多的用户选择性能更高的mac笔记本来工作,一般情况下,为了保证用户有一个很好的使用体验,Mac系统会在一定的时间内进行系统的更新,弥补前一个版本的不足.结果就有一些用户反应Mac升级后,电脑 ...

  2. Guitar Pro吉他指弹入门——日式指弹的pm技巧

    在上一篇指弹的文章中,笔者向大家介绍了一下美式指弹,以及他独树一帜的三指法.那么这一期的文章,我将介绍另一个指弹界的大流派--日式指弹,日式指弹曲子向来以细腻而多变的情绪以及表达出来的艳丽色彩著称,今 ...

  3. java运算符与程序逻辑控制

    一.运算符 java中的运算符大致分为四种:数学运算符,关系运算符.逻辑运算符.位运算 1.数学运算符:即咱们平常说的加减乘除运算,这种运算是分先后顺序的,如果想要优先进行运算,建议加上小括号,使其运 ...

  4. kafka producer 概要(看源码前，最好能掌握)

        kafakproducer概要(看源码前,最好能理解) 摘要 kafak 被设计用来作为一个统一的平台来处理庞大的数据的实时工具,在设计上有诸多变态的要求 它必须具有高吞吐量才能支持大量事件流 ...

  5. CentOS7.X 下安装MySQL8.0（附文件）

    这是64位的安装包.如果需要32位的可以去官网下载哦.步骤一样 1 获取安装资源包 mysql-8.0.18-1.el7.x86_64.rpm-bundle.tar 链接: https://pan.b ...

  6. 牛客练习赛66 C公因子 题解(区间gcd)

    题目链接 题目大意 给你一个长为n的数组,给所有数组元素加上一个非负整数x,使得这个数组的所有元素的gcd最大 题目思路 这主要是设计到一个多个数gcd的性质 gcd(a,b,c,d.....)=gc ...

  7. 精尽MyBatis源码分析 - Spring-Boot-Starter 源码分析

    该系列文档是本人在学习 Mybatis 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释(Mybatis源码分析 GitHub 地址.Mybatis-Spring 源码分析 GitHub ...

  8. finalize和clean

    弊端 1.执行的时间不确定,资源释放不能靠这2个方法.Cleaner规范指出:"清除方法在System.exit期间的行为是与实现相关的.不确保清除动作是否会被调用." 2#.如果 ...

  9. Clickhouse 入门

    clickhouse 简介 ck是一个列式存储的数据库,其针对的场景是OLAP.OLAP的特点是: 数据不经常写,即便写也是批量写.不像OLTP是一条一条写 大多数是读请求 查询并发较少,不适合放置先 ...

  10. 怎么用Iometer测试存储性能

    1.Disk Targets选项栏中选择要测试的磁盘,1 per target of Outstanding I/Os 保持默认即可. 2.在Access Specifications栏中新建测试条件 ...