CSS3学习笔记（6）——动画 animation、animate.css 动画库的使用
在前几篇博客中，我记录了CSS3中“过渡”的用法，但严格上过渡并不算是真正意义上*的动画，因为它只是初始状态过渡到了最终状态的一个过程。可以理解为只有两个节点。
CSS3的 animation 样式提供了关键帧动画，通过关键字 @keyframes 配合 animation 可以设置多个节点（可理解为帧数）来精确控制一个或一组动画，常用来实现复杂的动画效果。
animation：
| animation-name | 指定动画名称 |
| animation-duration | 设置动画的总耗时，单位为s |
| animation-iteration-count | 设置动画播放的次数，参数为数字或infinite（无穷），默认为1 |
| animation-direction: alternate | 设置交替动画，alternate属性代表来回交替 |
| animation-delay | 设置延迟，单位为s |
| animation-timing-function | linear 设置匀速 |
| animation-fill-mode |
设置动画结束时的状态，它有三种属性： （1）forwards:会保留动画结束时的状态，在有延迟的情况下，并不会立刻进行到动画的初始状态 |
| animation-play-state | 设置动画播放的状态，running是播放，paused是暂停 |
@keyframes：
@keyframes 指定动画的关键帧，用百分比来将动画分成多个节点（其中0%可用 from 代替，100%可用 to 代替）。我们来看一段它的代码：
@keyframes flash_name{
from{}
50%{}
to{}
}
其中 flash_name 就是指定的动画名称，它与 animation-name 对应。而from{}、50%{}、to{}表示三个节点，可分别在三个节点中添加样式。
案例：
使用animation动画和transform移动实现无缝的图片滚动：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
div{
width: 800px;
height: 150px;
margin: 100px auto;
overflow: hidden;
}
ul{
width: 200%;
animation-name: move;
animation-duration: 4s;
animation-iteration-count: infinite;
/* animation-direction: alternate; */
animation-timing-function: linear;
animation-fill-mode: backwards;
}
div:hover ul{
animation-play-state: paused;
}
li{
float: left;
}
img{
width: 200px;
height: 150px;
}
@keyframes move{
from{
transform: translateX(0px);
}
to{
transform: translateX(-800px);
}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href=""><img src="./onepiece.jpg" ></a></li>
<li><a href=""><img src="./huoying.jpeg" ></a></li>
<li><a href=""><img src="./reborn1.jpg" ></a></li>
<li><a href=""><img src="./jinji.jpg" ></a></li>
<li><a href=""><img src="./onepiece.jpg" ></a></li>
<li><a href=""><img src="./huoying.jpeg" ></a></li>
<li><a href=""><img src="./reborn1.jpg" ></a></li>
<li><a href=""><img src="./jinji.jpg" ></a></li>
</ul>
</div>
</body>
</html>animation 动画库
animate.css 是CSS3的一个动画库，我这里先贴上一个 animate.css网址。可以通过这个网址下载 animate.css，也可以查看它的使用说明，甚至能对库里的动画效果进行演示。
animate.css 动画库的使用我自己认为还是很简单的，毕竟就是一个包含了很多动画效果的 css 文件，很好理解。在使用的时候，我简单地将其分为三步：
（1）调用库：
<link rel="stylesheet" type="text/css" href="animate.css"/>（2）添加类：
在 animate.css 中，每种动画都用不同类名区分，若我们想要对某个元素添加某种动画效果，就只需要给这个元素添加对应的类名（注意在通过类名选择动画时，类名除了动画效果本身的类名外，还要有个 animated 类名）即可。
当然了，为一个元素添加类名的方法那就多了去了，所以能实现各种方式来展现动画：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="animate.css"/>
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #FF6700;
margin: 100px auto;
}
</style>
</head>
<body>
<div id="demo"></div>
<script type="text/javascript">
div = document.querySelector("#demo");
div.onclick = function(){
div.classList.add("animated");
div.classList.add("shake");
//设置setTimeout,设置在点击元素后移除动画效果,这样2s后再次点击依旧有动画效果
setTimeout(function(){
div.classList.remove("shake");
},2000);
}
</script>
</body>
</html>（3）自行配置一些动画效果
我们可以自行更改库中的动画的一些参数，比如我嫌上例中 shake 动画摇得太快了，就可以在css样式中将他的 animation-duration 改得大一点：
#demo{
animation-duration: 5s;
}
上一篇： 移动端判断手势滑动方向的方法
下一篇： 3dsMax场景损坏怎么合并?