css3 动画库Animate.css使用
Posted 西邮网络科技协会
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3 动画库Animate.css使用相关的知识，希望对你有一定的参考价值。
css3 动画库Animate.css使用
何为Animate.css
在写CSS3的动画效果时，时常因为自己实现的效果不好，或者庞大的代码量而头痛不已。
那么这时候就轮到我们强大的动画库登场了，之前写东西的时候找到了Animate.css这个动画库。
看到Animate，就让我们想到了CSS3中的animation属性。没错，Animate.css就是一个功能强大的CSS3动画库。
· npm安装
$ npm install animate.css
· CDN
https://unpkg.com/animate.css@3.5.2/anim ate.min.css
2
使用方法
CSS引入
1、<head>
2、 <link rel="stylesheet" href="animate.min.css">
3、</head>
给元素加上animated类名
<div class="animated">demo</div>
根据需要的动画效果添加动画类如（rotateInDownRight)
<div class="animated rotateInDownRight">demo</div>
这样就完成了静态的动画效果添加
3
动态添加动画样式
由静态的样式添加，我们可以知道如果想让元素有动画效果，只需给它增添对应的class属性即可。所以问题就迎刃而解了。
设置动画参数
由于Animate.css是基于CSS3的动画库，所以可以用CSS3的animation属性来配置一些参数
· animation-name //规定绑定的动画名称
· animation-duration //规定完成动画所花时间
· animation-timing-function //规定动画的速度曲线
· animation-delay //规定动画开始之前的延迟
· animation-iteration-count //规定动画播放次数
· animation-direction //规定是否应该轮流反向播放动画
在相应的css内定义这些属性即可，例如：
.demo{
animation-duration: 5s; //动画完成共5s
animation-iteration-count: 3; //动画执行3次
animation-delay: 3s; //动画延迟3s后执行
}
运用jQuery经行class的添加(js同理)
· 添加class
$('.demo').addClass('animatedrotateInDownRight');
如果你需要给元素添加其他动画，或元素隐藏后让他重现，那么你需要将class名删除,再之后你就可以进行上一步的动画效果添加了
· class名的添加后移除
$(function(){
$('.demo').addClass('animated rotateInDownRight');
setTimeout(function(){
$('.demo').removeClass('rotateInDownRight');
}, 500);
});
END
Animate.css是一款强大的CSS3动画库，他的所有动画样式（class名）可以在 在线演示 看到和获取。通过操作class可以灵活运用Animate.css实现动画效果，大大减少了工作量，提高效率
以上是关于css3 动画库Animate.css使用的主要内容，如果未能解决你的问题，请参考以下文章