使用animation添加动画效果
1.定义动画
定义keyframes关键帧
第一种写法：
/*直接从0到100%的状态*/
@keyframes 动画名称 {
from {}
to {}
}
第二种写法：
<!-- 百分比指的是动画总时长的占比 -->
@keyframes 动画名称 {
0% {}
50% {}
100% {}
}
定义完动画后，要使用animation赋值才能动起来
2.调用动画
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态 其中动画名称和动画时长必须赋值，除了动画时长和延迟时间要注意一下先后，其他取值不分先后顺序
3.动画属性拆分
animation-name: 动画名称
animation-duration: 动画时长
animation-delay: 延迟时间
animation-fill-mode: 动画执行完毕时状态，forwards:最后一帧状态，backwards:第一帧状态（默认值）
animation-timing-function: 速度曲线，steps(数字）:逐帧动画，
animation-iteration-count: 重复次数，infinite:无限循环
animation-direction: 动画执行方向， alternate:反向，normal:正常（默认）
animation-play-state: 暂停动画， paused:暂停，running：播放
4.走马灯示例
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 840px;
height: 80px;
list-style: none; /*去除ul的样式*/
animation: move 3s infinite linear;
}
.showbox {
width: 200px;
height: 80px;
margin: 100px auto;
overflow: hidden;
}
.showbox li {
width: 120px;
height: 80px;
float: left;
}
ul li img{
width: 100%;
height: 100%;
}
@keyframes move {
to {
transform: translate(-600px);
}
}
.showbox:hover ul{
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="showbox">
<ul>
<li>
<img src="./img/keqing.jpg"></img>
</li>
<li>
<img src="./img/xiaogong.jpg"></img>
</li>
<li>
<img src="./img/xinhai.jpg"></img>
</li>
<li>
<img src="./img/ypf.jpg"></img>
</li>
<li>
<img src="./img/ypf2.jpg"></img>
</li>
<li>
<img src="./img/keqing.jpg"></img>
</li>
<li>
<img src="./img/xiaogong.jpg"></img>
</li>
</ul>
</div>
</body>
</html>
解析：上述代码是做的五张图片的一个无缝衔接循环，图片120px,盒子宽度200px可以显示两张图片，所以我们把前两张图片复制一下放到最后面，这样当图片移动完盒子内就不会留白，所以就实现了无缝的一个循环。
