动画利器animate.css

使用过CSS3编写动画的同学一定感叹CSS3的强大，但是也会感到书写的麻烦。每次都要计算动画的各个参数，十分麻烦。有没有一个库能封装一些常用的CSS3动画效果。答案是肯定的，animate.css就是一个很好的CSS库，github地址：https://github.com/daneden/animate.css 。下面我们一起来看一看如何使用它。

点击上面的链接，就可以看到一个很简约的页面，其实这个页面就是animate.css的API 文档。在页面中间的下拉框中选择一个动画类，再点击旁边的按钮，就可以看到上方的文字上的动画。

那么，我们在实际的开发中又该如何使用animate.css。比如我有一个div需要使用bounce动画。那么就可以如下面的方法来编写：

 <div id="animate-1" class="animated">演示bounce动画</div>

注意class=“animated” 是调用动画必备的，然后就在需要的时候调用：

 $('.animate-1').addClass('bounce');

这样，就可以看到动画了。我简单试了一下，这些动画在移动平台上也是可以用的。

巴特西

动画利器animate.css

最新文章

热门文章