cssanimate,CSSAnimate动画案例教程

如何使用animate.css

animate.css是一个css3动画库，可以到github上去下载，里面预设了很多种常用的动画，可以先在本页看下演示效果，使用也很简单，因为它是把不同的动画绑定到了不同的类里，所以我们想要使用哪种动画的时候，只需要简单的把那个相应的类添加到元素上就行了：

首先在head中引入下载的animate.css文件

然后你想要哪个元素进行动画，就给那个元素添加上animated类 以及特定的动画类名，animated是每个要进行动画的元素都必须要添加的类。

假设使用jquery，要给一个id为demo的元素添加一个摇动的动画,因为摇动的动画类名为shake

这样载入页面，元素就能动起来了。你也可以在动画完成后，把动画类移除，以便可以再次进行同一个动画。

至于动画的配置参数，比如动画持续时间，动画的执行次数等等，你可以在你的的元素上自行定义，覆盖掉animate.css里面所定义的就行了。

注意这些属性还要记得加上各浏览器的前缀。

总之是很灵活的，说到底不就是一个css文件吗，一看就懂的，你在里面想怎么整就怎么整，不想用它提供的类名，就在里面改掉就行了。如果你只想用里面的部分动画，也可以把那些要使用的动画分离出来，它的官网也提供了这样的功能。

css.animate 是用什么属性让元素消失的

animate是一个动画效果，你可以通过opacity从1到0透明度的变化使得元素从你的视线消失，也可以通过移动位置，把元素从你的视线移走

关于Animate css不起作用的原因

在使用hBuilder编写uni-app时，动画效果Animate css会不起作用，原因是需要先在类名称中，需要animate__animated声明后，再加上效果类。例如：

view class="view-box animate__animated animate__backInDown" hover-class="view-box-hover " 测试一下 /view