使用基本的代码

<!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. 最全JVM与性能调优知识点总结，看看哪些是你还没掌握的？

    前言 JVM调优是每个高级程序员的必修课,在本章中,我会从发展过程以及核心价值来剖析JVM的体系结构.为了让大家更好的理解JVM的工作机制, 我会在讲解完运行时数据区之后,再通过一个类的加载过程到这个 ...

  2. 阿里四面P7稳了，得亏我会这些Spring面试题，果然大厂都爱问它们

    前言 先说一下本人情况吧,末流985毕业,毕业之后一直在一家不大不小的公司里安稳上班.上半年因为疫情的原因公司调整了工资,我也是随波逐流跟随大家辞了职.辞职之后向阿里.字节这些都投了简历(但是只收到了 ...

  3. 头秃了，使用@AutoConfigureBefore指定配置类顺序竟没生效？

    持续原创输出,点击上方蓝字关注我 前言 日常工作中对于Spring Boot 提供的一些启动器可能已经足够使用了,但是不可避免的需要自定义启动器,比如整合一个陌生的组件,也想要达到开箱即用的效果. 在 ...

  4. 通俗解析莱文斯坦距离(Levenshtein Distance)计算原理(最小编辑距离)

    [版权声明]:本文章由danvid发布于http://danvid.cnblogs.com/,如需转载或部分使用请注明出处 最近看到一些动态规划的东西讲到莱文斯坦距离(编辑距离)的计算,发现很多都讲的 ...

  5. zabbix 监控文件夹

    安装inotify wget http://github.com/downloads/rvoicilas/inotify-tools/inotify-tools-3.14.tar.gz tar -zx ...

  6. php进阶学习-单例设计模式

    什么是单例模式(singleton)? 在整个应用程序的生命周期中,任何一个时刻,单例类的实例都只存在一个,同时这个类还必须提供一个访问该类的全局访问点. 单例模式的特点 一个类只有一个实例 私有克隆 ...

  7. 蓝桥杯——递增三元组（2018JavaB-第6题，11分）

    递增三元组(18JB-6-11') 给定三个整数数组 A = [A1, A2, ... AN], B = [B1, B2, ... BN], C = [C1, C2, ... CN], 请你统计有多少 ...

  8. leetcode 练习--反转链表

    最近开始学习数据结构和算法的学习,也自然开始在 leetcode 上练习,所以每周大概会分享做过的leetcode 练习,尽量做到每天更新一道题目. 作为 leetcode 练习笔记的第一道题目,选择 ...

  9. [Android systrace系列] 抓取开机过程systrace

    ------------------------------------------------------------------------- 这篇文章的小目标:了解抓取开机过程systrace的 ...

  10. Python中sorted(iterable, *, key=None, reverse=False)函数参数定义中的独立星号(*)的含义

    老猿在 <Python中函数的参数带星号是什么意思?>中介绍了Python函数中参数带星号的含义,而在实际使用和Python的标准文档中,会看到某写函数(如sorted(iterable, ...