动画利器animate.css

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

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

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

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

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

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

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

posted on 2015-02-06 14:29  前端—郭瑞  阅读(345)  评论(0编辑  收藏  举报

导航