过渡：从一个状态到另外一个状态。
动画：可以添加多个关键帧。
<html>
<head>
<meta charset="utf-8">
<title>动画的实现：keyframes</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
background-color: red;
/* 添加动画效果 */
/* 1.animation-name指定动画名称 */
animation-name: moveTest;
animation-duration: 2s;
/* 3.设置动画的播放次数，默认1。可以指定具体的数值，也可以指定infinite */
animation-iteration-count: infinite;
/* 4.设置交替动画：alternate来回交替； */
animation-direction: alternate;
/* 5.动画延迟执行 */
animation-delay: 1s;
/* 6.设置动画结束时的状态：默认情况下，动画执行完毕后，会回到原始状态
forwards:会保留动画结束时的状态，在有延迟的情况下，并不会立刻进入到动画的初始状态。
backwords:不会保留动画结束时的状态。在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进入初始状态。
both:既会保留动画的结束时状态，在有延迟的情况下，也会立刻进入到动画的初始状态。
*/
animation-fill-mode: both;
/* 6.动画的时间函数 */
animation-timing-function: ease-in;
/* 7.设置动画的播放状态：paused暂停，running播放 */
animation-play-state: running;
}
/* 创建动画，百分比是指整个动画耗时的百分比 */
/* 0%等价于from；100%等价于to */
@keyframes moveTest {
0% {
transform: translate(0, 0);
}
/* from {transform: translate(0, 0);} */
50% {
transform: translate(0, 500px);
}
100% {
transform: translate(500px, 500px);
}
}
</style>
</head>
<body>
<div class="box"></div>
<input type="button" id="play" value="播放" />
<input type="button" id="pause" value="暂停" />
<script type="text/javascript">
/* 实现动画的播放与暂停 */
var div = document.querySelector("div");
document.querySelector("#play").onclick = function(){
div.style.animationPlayState = "running";
}
document.querySelector("#pause").onclick = function(){
div.style.animationPlayState = "paused";
}
</script>
</body>
</html>============================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多张图片，无缝滚动</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 882px;
height: 86px;
margin: 100px auto;
background-color: #ddd;
/* 防止UI溢出效果 */
overflow: hidden;
}
div>ul {
/* 宽度不够，改成2倍的宽度 */
width: 200%;
list-style: none;
/* 设置动画名称，设置动画耗时 */
animation-name: move;
animation-duration: 7s;
/* 无限循环，线性变化 */
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div>ul>li {
width: 126px;
float: left;
}
div>ul>li>img {
width: 100%;
}
/* 鼠标上移动，停止移动，显示小手的图标 */
div:hover >ul{
cursor: pointer;
animation-play-state: paused;
}
/* 创建动画 */
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(-882px);
}
}
</style>
</head>
<body>
<div>
<ul>
<!-- 后面可能是空白，所以要多添加一些图片 -->
<li><img src="../images/puke01.png" alt=""></li>
<li><img src="../images/puke02.png" alt=""></li>
<li><img src="../images/puke03.png" alt=""></li>
<li><img src="../images/puke04.png" alt=""></li>
<li><img src="../images/puke01.png" alt=""></li>
<li><img src="../images/puke02.png" alt=""></li>
<li><img src="../images/puke03.png" alt=""></li>
<li><img src="../images/puke01.png" alt=""></li>
<li><img src="../images/puke02.png" alt=""></li>
<li><img src="../images/puke03.png" alt=""></li>
<li><img src="../images/puke04.png" alt=""></li>
<li><img src="../images/puke01.png" alt=""></li>
<li><img src="../images/puke02.png" alt=""></li>
<li><img src="../images/puke03.png" alt=""></li>
</ul>
</div>
</body>
</html>