面试时遇到了一个问题，利用css，写一个元素从左到右然后到左一直循环的动画；
先看效果：
说一下大体的思路，利用了自定义动画和infinite属性（这个属性确实忘了，也从正面反应了我好多东西还没记住），通过百分比去控制运动的轨迹，50%的时候就是最右边的时刻。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.block{
position: absolute;
width: 100px;
height: 100px;
background-color: red;
animation: box 3s infinite;
}
@keyframes box{
0% {left:0px}
50%{left: 500px;}
100%{left: 0px;}
}
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>
END