补间动画就是指控制最开始的状态和最末的状态的动画，中间的状态由浏览器自动帮我们计算生成。
下面给了一个实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>补间动画——transition</title>
<style type="text/css">
html {
background: #f5f5f5;
}
.box {
width: 600px;
height: 200px;
border: 1px solid #ccc;
background: #fff;
margin: 20px auto;
}
.circle {
width: 50px;
height: 50px;
background: blue;
border-radius: 50%;
margin: 75px 0;
transition: all 2s;
}
.box:hover .circle {
background: red;
transform: translate(550px, 0);
}
</style>
</head>
<body>
<div class="box">
<div class="circle"></div>
</div>
</body>
</html>
第一个图是开始的状态，第二个图是结束时的状态。
transition动画最主要的属性是transition属性，它其实是4个属性的缩写。
