animate.css 动画库怎么用

html-css017

animate.css 动画库怎么用,第1张

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

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

假设使用jquery,要给一个id为demo的元素添加一个摇动的动画,因为摇动的动画类名为shake,所以代码是这样的:

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

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

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

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

1.引入css动画库

2.引入wow.js并且初始化

1.设置css类

将CSS类.wow添加到HTML元素:在用户滚动显示它之前,它将是不可见的。

2.选择动画类型

在Animate.css中选择一个动画样式,然后将CSS类添加到HTML元素中。

data-wow-duration: 更改动画持续时间

data-wow-delay: 动画开始前的延迟

data-wow-offset: 开始动画的距离(与浏览器底部相关)

data-wow-iteration: 动画重复的次数

boxClass: 用户滚动时显示隐藏框的类名。

animateClass: 触发CSS动画的类名(animate.css库默认为'animated')

offset: 定义浏览器视口底部与隐藏框顶部之间的距离。当用户滚动并到达该距离时,隐藏的框被显示出来。

mobile: 在移动设备上打开/关闭WOW.js。

live: 在页面上不断检查新的WOW元素。