Animate.css是一个有趣的，跨浏览器的css3动画库。很值得我们在项目中引用。
插件描述: Animate.css内置了很多典型的css3动画，兼容性好使用方便。
一. 基本用法
** 1. 在您的文档中包含样式表 <head>**
< head >
< link rel = “ stylesheet ” href = “ animate.min.css ” >
</ head >
或使用由CDNJS托管的版本
< head >
< link rel = “ stylesheet ” href = “ https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css ” >
</ head >
用法
1. 要在您的网站中使用animate.css，只需将样式表拖放到文档中<head>，
并将该类添加animated到元素，以及任何动画名称
例 : <div class="animated bounce">弹跳效果</div>
2.将类添加animated到要动画的元素中。您可能还希望将类包含在infinite无限循环中。
例: <div class="animated infinite bounce">无限弹跳效果</div>
注意 : 使用时动画名称前 必须加<b> animated </b>类方可生效
最后，您需要添加以下类之一:
Attention Seekers 注意力寻求者（9个）
| 样式 | 简介 |
|---|---|
| bounce | 弹跳 |
| flash | 闪 |
| pulse | 脉冲 |
| rubberBand | 橡皮筋 |
| shake | 摇 |
| swing | 摇摆 |
| tada | 波幅 |
| wobble | 摇晃 |
| jello | 果冻 |
Bouncing Entrances 弹跳进入（5个）
| 样式 | 简介 |
|---|---|
| bounceIn | 向里，弹跳 |
| bounceInDown | 向里，向下,弹跳 |
| bounceInLeft | 向里，向左,弹跳 |
| bounceInRight | 向里，向右,弹跳 |
| bounceInUp | 向里，向上，弹跳 |
Bouncing Exits 弹跳出口（5个）
| 样式 | 简介 |
|---|---|
| bounceOut | 向外，弹跳 |
| bounceOutDown | 向外，向下，弹跳 |
| bounceOutLeft | 向里，向左，弹跳 |
| bounceOutRight | 向外，向右，弹跳 |
| bounceOutUp | 向外，各上，弹跳 |
Fading Entrances 平淡进入（9个）
| 样式 | 简介 |
|---|---|
| fadeIn | 向里 |
| fadeInDown | 向里，向下，变大 |
| fadeInDownBig | 向里，向左，弹跳 |
| fadeInLeft | 向里，向左 |
| fadeInLeftBig | 向里，向左，变大 |
| fadeInRight | 向里，向右 |
| fadeInRightBig | 向里，向右，变大 |
| fadeInUp | 向里，向上 |
| fadeInUpBig | 向里，向上，变大 |
Fading Exits 平淡退场（9个）
| 样式 | 简介 |
|---|---|
| fadeOut | 向外 |
| fadeOutDown | 向外，向下 |
| fadeOutDownBig | 向外，向下，变大 |
| fadeOutLeft | 向外，向左 |
| fadeOutLeftBig | 向外，向左，变大 |
| fadeOutRight | 向外，向右 |
| fadeOutRightBig | 向外，向右，变大 |
| fadeOutUp | 向外，向上 |
| fadeOutUpBig | 向外，向上，变大 |
Flippers 翻动 （5个）
| 样式 | 简介 |
|---|---|
| flip | 翻翻动转 |
| flipInX | 向里，上下，翻动 |
| flipInY | 向里，左右，翻动 |
| flipOutX | 向外，上下，翻动 |
| flipOutY | 向外，左右，翻动 |
Lightspeed 缓缓移动 （2个）
| 样式 | 简介 |
|---|---|
| lightSpeedIn | 缓缓移入 |
| lightSpeedOut | 缓缓移出 |
Rotating Entrances 翻转入口 （5个）
| 样式 | 简介 |
|---|---|
| rotateIn | 向里，翻转 |
| rotateInDownLeft | 向里，向下，向左，翻转 |
| rotateInDownRight | 向里，向下，向右，翻转 |
| rotateInUpLeft | 向里，向上，向左，翻转 |
| rotateInUpRight | 向里，向上，向右，翻转 |
Rotating Exits 翻转退场 （5个）
| 样式 | 简介 |
|---|---|
| rotateOut | 向外，翻转 |
| rotateOutDownLeft | 向外，向下，向右，翻转 |
| rotateOutDownRight | 向外，向下，向右，翻转 |
| rotateOutUpLeft | 向外，向上，向左，翻转 |
| rotateOutUpRight | 向外，向上，向右，翻转 |
Specials （3个）
| 样式 | 简介 |
|---|---|
| hinge | 合页 |
| rollIn | 向里滚动 |
| rollOut | 向外滚动 |
Zoom Entrances 缩放进入 （5个）
| 样式 | 简介 |
|---|---|
| zoomIn | 向里，放大 |
| zoomInDown | 向里，向下，放大 |
| zoomInLeft | 向里，向左，放大 |
| zoomInRight | 向外，向右，放大 |
| zoomInUp | 向里，向上，放大 |
Zoom Exits 缩放退场 （5个）
| 样式 | 简介 |
|---|---|
| zoomOut | 向外，放大 |
| zoomOutDown | 向外，向下，放大 |
| zoomOutLeft | 向外，向左，放大 |
| zoomOutRight | 向外，向右，放大 |
| zoomOutUp | 向外，向上，放大 |
Sliding Entrances 滑动进入 （4个）
| 样式 | 简介 |
|---|---|
| slideInUp | 向里，向上，滑动 |
| slideInDown | 向里，向下，滑动 |
| slideInLeft | 向里，向左，滑动 |
| slideInRight | 向里，向右，滑动 |
Sliding Exits 滑动退场 （4个）\
| 样式 | 简介 |
|---|---|
| slideOutUp | 向外，向上，滑动 |
| slideOutDown | 向外，向下，滑动 |
| slideOutLeft | 向外，向上，滑动 |
| slideOutRight | 向外，向右，滑动 |
当您将其与jQuery组合或添加您自己的CSS规则时，您可以使用animate.css来完成一大堆其他内容.动态地使用jQuery轻松添加动画:
$（' #box ').addClass（' animated bounceInRight '）;
您还可以检测动画结束的时间:
您可以更改动画的持续时间，添加延迟或更改播放次数：
#box{
-vendor-animation-duration：3 s ;
-vendor-animation-delay：2 秒 ;
-vendor-animation-iteration-count：infinite ;
}
animation-delay 属性定义动画何时开始。 animation-delay 值以秒或毫秒计。
提示: 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画.
例: 等待俩秒 开始动画
div
{
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari 和 Chrome */
}
关于Jquery中animate可以操作css样式属性总结
可以用 animate() 方法来操作所有 CSS 属性吗？是的，几乎可以！
不过，需要记住一件重要的事情:当使用 animate()时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft
而不是 padding-left，使用 marginRight而不是 margin-right，等等。
css中的不是所有属性都可以用jQuery动画（animate函数）来动态改变，下面总结了JQ可以操作元素的一些属性：
* backgroundPosition
* borderWidth
* borderBottomWidth
* borderLeftWidth
* borderRightWidth
* borderTopWidth
* borderSpacing
* margin
* marginBottom
* marginLeft
* marginRight
* marginTop
* outlineWidth
* padding
* paddingBottom
* paddingLeft
* paddingRight
* paddingTop
* height
* width
* maxHeight
* maxWidth
* minHeight
* maxWidth
* font
* fontSize
在animate函数的css参数指定并不同于标准css属性，例如这个css标准是：font-size。同理上面很多也是这样的情况
* bottom
* left
* right
* top
* letterSpacing
* wordSpacing
* lineHeight
* textIndent
* opacity
小例子<em>animate 结合jQuery </em>
- 让指定元素点击左右移动
$("#right").click(function () {
$(".block").animate({ left: '+50px' }, "slow");
});
$("#left").click(function () {
$(".block").animate({ left: '-50px' }, "slow");
});
有不足之处,还请各位指出! 抱拳了,老铁!
网友评论