使用过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');
这样,就可以看到动画了。我简单试了一下,这些动画在移动平台上也是可以用的。