动画，两个状态之间的转换，可以使用过度来解决。如果是多个状态之间的转换，就需要使用动画了，并且动画过程是可按的，例如是否循环，是否捆住，最终画面等等。
白龙网特别提醒，动画要先定义（关键词、花括号、从A到B），后使用（关键词：动画名称 动画时间，两个参数之间用空格隔开）。可以定义两个状态之间的转换（from/to），也可以定义多个状态之间的转换（百分比）。
（1）两个状态之间的动画
<style>
div {
width: 200px;
height: 200px;
background-color:red;
/* 调用已定义的动画：动画名称、动画时间 */
animation: change 5s;
}
/* 用from/to定义两种宽度变化的动画 */
@keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
}
</style>
</head>
<body>
（2）多种动画之间的转换
<style>
div {
width: 200px;
height: 200px;
background-color:red;
/* 调用已定义的动画：动画名称、动画时间 */
animation: change 5s;
}
/* 用百分比定义多种宽度变化的动画 */
@keyframes change {
0% {
width: 200px;
}
50% {
width: 500px;
height: 800px;
}
100% {
width: 800px;
height: 300px;
}
}
</style>
</head>
<body>
（3）调用动画的参数
animation:动画名称 动画时长 速度曲线（linear/step()） 延迟时间 重复次数（4/infinite） 动画方向（alternate） 结束状态（backwards/forwards），各参数之间用空格隔开。
<style>
div {
width: 200px;
height: 200px;
background-color:red;
/* 动画名称、动画时长，这两个参数必须要出现;参数不分先后顺序；如果有两个数值，那么第一个数值表示时长，第二个数值表示延迟时长。 */
animation: change 5s;
/* 速度曲线：匀速、非匀速 */
animation: change 2s linear;
animation: change 2s steps(3);
/* 延迟时间 */
animation: change 2s 3s;
/* 重新次数：指定次数，则写数字即可；无限循环，使用infinite关键词即可。 */
animation: change 2s 5;
animation: change 2s infinite;
/* 动画方向，常用,与无限循环配合使用 */
animation: change 2s infinite alternate;
/* 动画结束后状态有两个，backwards是默认状态，无效果；forwards是结束时的状态,需要注意的是，该关键词不能与无限循环一起使用 */
animation: change 2s backwards;
animation: change 2s forwards;
}
@keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
}
</style>
</head>
<body>
<div></div>
</body>
另外，动画的所有参数都可以拆分开来单独书写，如下：
animation-name: change;
animation-duration: 3s;
animation-timing-function: linear;
animation-timing-function: steps(3);
animation-delay: 4s;
animation-iteration-count: infinite;
animation-iteration-count: 5;
animation-direction: alternate;
animation-fill-mode: backwards;
animation-fill-mode: forwards;
animation-play-state: paused;
（4）动画类型
精灵图+速度曲线steps，可以制作逐帧动画。而另外一种匀速的动画，叫补间动画。
逐帧动画的实现方法，分为三步，首先是布局盒子，盒子的宽高与每个精灵图的宽高相同，根据精灵图的宽度W以及精灵图中小图的数量C，求出每个小图的宽度W/C，高度就是精灵图的高度，根据上述两个参数亮度、高度，新建一个盒子，并把精灵图设置为盒子的背景图片。其次是要定义动画，即：在动画中定义背景精灵图的水平、垂直位置的初值与最终值；最后在盒子中调用定义的动画即可，而动画的参数分别为：动画名、动画时间、速度曲线（steps(12)属性要设置成小精灵图片的个数）、重复次数（无限循环infinite）。
<style>
div {
width: 103px;
height: 103px;
background-image: url(./sp.jpg);
animation: move 2s steps(12) infinite;
}
@keyframes move {
from {
background-position: 0 0;
}
to {
background-position: -1237px 0;
}
}
</style>
</head>
<body>
（5）奔跑效果
多组动画-小人从一个位置跑到另外一个位置
多组动画，可以复加使用。方法是用逗号隔开每一动画的名称与其属性。另外，如果动画的初始位置与盒子的初始样式相同时，可以省略from。
<style>
div {
width: 103px;
height: 103px;
background-image: url(./sp.jpg);
animation: move 2s steps(12) infinite,
run 3s forwards;
}
@keyframes move {
from {
background-position: 0 0;
}
to {
background-position: -1237px 0;
}
}
@keyframes run {
from {
transform: translateX(0);
}
to {
transform: translateX(800px);
}
}
</style>
</head>
<body>
<div></div>
</body>
（6）走马灯效果
7张图片的走马灯效果，每次展示3张图片。根据题意可知，首先，布局的盒子宽度是3张图片的宽度，高度是图片的高度；7张图片放到UL/LI之中，浮动之后，由于.box盒子装不下7张图片的宽度，有故而LI会换行，此时把UL设置成7张图片的宽度，.box设置成超出隐藏，即可让7张图片显示在一行。其次，定义使用动画，其实就是让图片在UL中移动7张图片的宽度，即定义7张图片宽度的动画，让UL调用；但是，此时会出现一个问题，即7张图片移动之后，.box成空白了。故而需要把前3张图片复制一份放到7张图片的后面用以占位，那么此时UL的宽度应该变为10张图片的宽度了。再次，可以设置一个HOVER效果，当鼠标经过.box盒子时，让UL移动效果暂停下来。
<style>
* {
margin: 0;
padding: 0;
}
ul,li {
list-style:none;
}
.box {
margin: 0 auto;
width: 957px;
height: 319px;
border: 1px solid black;
overflow: hidden;
}
.box ul {
width: 3190px;
height: 319px;
animation: move 5s infinite;
}
.box ul li {
float: left;
}
@keyframes move {
to {
transform: translateX(-2233px);
}
}
.box:hover ul {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="./image/clothes_goods_1.jpg" alt=""></li>
<li><img src="./image/clothes_goods_2.jpg" alt=""></li>
<li><img src="./image/clothes_goods_3.jpg" alt=""></li>
<li><img src="./image/clothes_goods_4.jpg" alt=""></li>
<li><img src="./image/clothes_goods_5.jpg" alt=""></li>
<li><img src="./image/clothes_goods_6.jpg" alt=""></li>
<li><img src="./image/clothes_goods_7.jpg" alt=""></li>
<li><img src="./image/clothes_goods_1.jpg" alt=""></li>
<li><img src="./image/clothes_goods_2.jpg" alt=""></li>
<li><img src="./image/clothes_goods_3.jpg" alt=""></li>
</ul>
</div>
</body>
（7）布局经验
当给body添加背景图片占满浏览器位置时，必须给html/body一个100%的高度，否则无法占满整个浏览器窗口。
动画效果的实现，一般是先引入内容，再定义动画，最后调用动画，即可。