Animate.css 一款牛逼的css3动画库
程序员文章站
2024-03-25 12:29:40
...
Animate.css是一款很牛逼的,跨浏览器的css3动画库,使用方法也很简单只要引入一个animate.min.css就可以了,
简单使用
1 首先引入 animate的 css 文件样式
cdn文件
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
下载到本地
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
2 给指定元素止指定样式
我们看到有三个class ,其中第一个animated 是基本样式,所有要产生动画的元素都需要,第二个infinite是可 选的,如果加了这个类,动画将循环执行,第三个就是动画特效了 ,目前animated 已经有很多动画特效了具体可 以点击这里查看 www.siyouku.cn/wenqing/animation
<div id="demoimg" class="animated infinite bounce">
<img style="width: 200px; height: 200px;" src="http://img.siyouku.cn/img24.jpg" />
</div>
3 当动画效果执行完成可以通过以下代码添加事件
$('#demoimg').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
4 有时候我们需要自定我们对动画的一些设置我们可以用下面的代码实现
#demoimg
{
-vendor-animation-duration: 3s; //动画持续时间
-vendor-animation-delay: 2s; //动画延迟时间
-vendor-animation-iteration-count: infinite; //动画执行次数,这里是一直执行
}
相关链接
动画demo:www.siyouku.cn/wenqing/animation
github:github.com/daneden/animate.css
本文永久更新地址:www.siyouku.cn/article/6827.html
上一篇: jQ - animate
下一篇: vue中使用Swiper Animate
推荐阅读
-
Animate.css 一款牛逼的css3动画库
-
animate.css 一种css3动画的组件库
-
css3动画简介以及动画库animate.css的使用_html/css_WEB-ITnose
-
css3动画简介以及动画库animate.css的使用_html/css_WEB-ITnose
-
Animate.css 一款牛逼的css3动画库
-
Animate.css 一款强大的预设css3动画库
-
Animate.css 使用教程(一个强大的 CSS3 动画库)
-
Animate.css(一款有意思的CSS3动画库)
-
CSS3学习笔记(6)——动画 animation、animate.css 动画库的使用
-
animate.css – 齐全的CSS3动画库