Animate.css

Animate.css是一个有趣的，跨浏览器的css3动画库。很值得我们在项目中引用。

插件描述: Animate.css内置了很多典型的css3动画，兼容性好使用方便。

Animate.css　官方网站

一. 基本用法

** 1. 在您的文档中包含样式表 **

< head  >
  < link  rel = “ stylesheet ”  href = “ animate.min.css ” >

或使用由CDNJS托管的版本

< head >
  < link  rel = “ stylesheet ”  href = “ https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css ” >

用法

1. 要在您的网站中使用animate.css，只需将样式表拖放到文档中，
并将该类添加animated到元素，以及任何动画名称

例　: 
弹跳效果

2.将类添加animated到要动画的元素中。您可能还希望将类包含在infinite无限循环中。

例: 
无限弹跳效果

注意 : 使用时动画名称前　必须加 animated 类方可生效

最后，您需要添加以下类之一:

---

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

---

小例子animate 结合jQuery

• 让指定元素点击左右移动

$("#right").click(function () {
    $(".block").animate({ left: '+50px' }, "slow");
});
$("#left").click(function () {
    $(".block").animate({ left: '-50px' }, "slow");
});

---

有不足之处,还请各位指出! 抱拳了,老铁!

下载地址