"

我们要处理web动画一般采用jQuery框架，零度在此推荐一个很酷的跨浏览器动画效果实现方式Animate.css，这套CSS样式支持很多不错的动画特效，在本文末尾将提供演示，通过Animate.css样式能够更加便捷的向页面元素添加动画，而不需要其它复杂的操作。

与其它的CSS样式一样，要使用它，首先需要在html头部引用animate.css样式表，官方提供压缩版的animate.min.css，示例如下：

<span style=color: blue><<span style=color: maroon>head<span style=color: blue>> <<span style=color: maroon>title<span style=color: blue>>零度编程网<span style=color: blue></<span style=color: maroon>title<span style=color: blue>> <<span style=color: maroon>link <span style=color: red>rel<span style=color: blue>=stylesheet <span style=color: red>href<span style=color: blue>=animate.min.css> </<span style=color: maroon>head<span style=color: blue>>

通过jQuery选择要进行动画的元素，为元素添加动画类名即可实现动画效果，不同的动画效果具有不同的类名，您可通过本文末尾的示例选择合适的类名，Animate.css简单易用，只需为元素添加类名，提供60种动画效果供您选择。

<span style=color: blue><<span style=color: maroon>script <span style=color: red>type<span style=color: blue>=text/javascript> $(<span style=color: maroon>'#yourElement').addClass(<span style=color: maroon>'animated bounceOutLeft'); <span style=color: blue></<span style=color: maroon>script<span style=color: blue>>

<font color=#555555>您也可以自定义动画的持续时间、延长时间和重复次数，只需编写三条CSS规则即可，vendor表示浏览器前缀（webkit, moz, etc）

<span style=color: maroon>#yourElement { <span style=color: red>-vendor-animation-duration: <span style=color: blue>3s; <span style=color: red>-vendor-animation-delay: <span style=color: blue>2s; <span style=color: red>-vendor-animation-iteration-count: <span style=color: blue>infinite; }

零度演示"