使用基本的代码

<!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. 在线思维导图Ayoa共享功能使用教程

    Ayoa是一个制作思维导图的软件,除了导图制作,小编在使用过程中还发现了一些令人惊喜的功能,这些功能使得Ayoa有了更大的亮点以吸引用户. 下面就为大家简单介绍几个小编认为Ayoa中较为实用的共享功能 ...

  2. 337. 打家劫舍 III（树上dp）

    在上次打劫完一条街道之后和一圈房屋后,小偷又发现了一个新的可行窃的地区.这个地区只有一个入口,我们称之为"根". 除了"根"之外,每栋房子有且只有一个" ...

  3. CET-6备考丨词组、佳句积累

    一.片段积累 (2020/09/17) 近三年 CET6 - 翻译 Phrases or Expressions Notes drive to commute to and from work 开车上 ...

  4. Java基础教程——命令行运行Java代码

    视屏讲解:https://www.bilibili.com/video/av48196406/?p=4 命令行运行Java代码 (1)使用记事本新建文本文件[Test.java]. 注意,默认状态下W ...

  5. mfc 双缓存

    CRect rect; //获取显示区域大小(该值为据对坐标,使用时需转换) GetWindowRect(rect); rect.SetRect(0, 0, rect.Width(), rect.He ...

  6. BugkuCTF-web-速度要快

    打开题目显示一串文字,应该是提示. 查看源代码 OK ,now you have to post the margin what you find post提交参数margin burp发送后发现响应 ...

  7. 推荐系统实践 0x0b 矩阵分解

    前言 推荐系统实践那本书基本上就更新到上一篇了,之后的内容会把各个算法拿来当专题进行讲解.在这一篇,我们将会介绍矩阵分解这一方法.一般来说,协同过滤算法(基于用户.基于物品)会有一个比较严重的问题,那 ...

  8. 孪生网络入门（上） Siamese Net及其损失函数

    最近在多个关键词(小数据集,无监督半监督,图像分割,SOTA模型)的范畴内,都看到了这样的一个概念,孪生网络,所以今天有空大概翻看了一下相关的经典论文和博文,之后做了一个简单的案例来强化理解.如果需要 ...

  9. 第1.2节 Python学习环境的使用

    Python的环境安装好以后,可以通过IDLE(Python 3.7 64-bit)进入图形界面使用Python,也可以通过Python 3.7 64-bit进入命令行交互式界面,两者都可以使用,不过 ...

  10. Android的intent

    title: Android基础01 date: 2020-02-15 17:17:04 tags: 1.Intent Intent可以让活动进行跳转.使用方式有两种,一种是显式,另一种是隐式. 1. ...