插件和效果

css3动画animate.css的使用和wow.js的介绍

日期:2016-05-26 阅读:27110

animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。

虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西。

在使用animate.css的时候通常都会搭配wow.js,
WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件 http://www.jq22.com/jquery-info1705

兼容

浏览器兼容:当然是只兼容支持 CSS3 animate 属性的浏览器,他们分别是:IE10+、Firefox、Chrome、Opera、Safari。

使用方法

1、引入文件

<link rel="stylesheet" href="animate.min.css">
2、HTML 及使用

<div class="animated bounce" id="dowebok"></div>
给元素加上 class 后,刷新页面,就能看到动画效果了。animated 类似于全局变量,它定义了动画的持续时间;bounce 是动画具体的动画效果的名称,你可以选择任意的效果。

具体介绍和演示请访问 http://www.jq22.com/jquery-info819