Animate.CSS 是一款很牛逼的, 跨浏览器的 css3 动画库, 使用方法也很简单只要引入一个 animate.min.css 就可以了,
简单使用
1 首先引入 animate 的 css 文件样式
cdn 文件
html 代码
- <head>
- <link rel="stylesheet"
- href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
- </head>
下载到本地
html 代码
- <head>
- <link rel="stylesheet" href="animate.min.css">
- </head>
2 给指定元素止指定样式
我们看到有三个 class , 其中第一个 animated 是基本样式, 所有要产生动画的元素都需要, 第二个 infinite 是可 选的, 如果加了这个类, 动画将循环执行, 第三个就是动画特效了 , 目前 animated 已经有很多动画特效了具体可 以点击这里查看 [www.siyouku.cn/wenqing/animation](http://www.siyouku.cn/wenqing/animation)
html 代码
- <div id="demoimg" class="animated infinite bounce">
- <img style="width: 200px; height: 200px;" src="http://img.siyouku.cn/img24.jpg" />
- </div>
3 当动画效果执行完成可以通过以下代码添加事件
javascript 代码
$('#demoimg').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
4 有时候我们需要自定我们对动画的一些设置我们可以用下面的代码实现
css 代码
- #demoimg
- {
- -vendor-animation-duration: 3s; // 动画持续时间
- -vendor-animation-delay: 2s; // 动画延迟时间
- -vendor-animation-iteration-count: infinite; // 动画执行次数, 这里是一直执行
- }
相关链接
动画 demo:[www.siyouku.cn/wenqing/animation](http://www.siyouku.cn/wenqing/animation)
github:[github.com/daneden/animate.css](http://github.com/daneden/animate.css)
本文永久更新地址:[www.siyouku.cn/article/6827.html](http://www.siyouku.cn/article/6827.html)
来源: http://www.qdfuns.com/article/46332/74c202863013ed8eefa2f874a752d093.html