一个动画示例，球沿着边框跑：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS animation</title><!--20180308 10:01-->
<style type="text/css">
div{
200px;
height:200px;
border:1px solid red;
margin:120px auto;
}
span{
display: inline-block;
20px;
height:20px;
background: orange;
border-radius: 100%;
animation:movearound 5s linear 2s infinite alternate;
-webkit-animation:movearound 5s linear 2s infinite alternate;/*infinite是无限循环，数字是循环几次*/
-moz-animation: movearound 5s linear 2s infinite alternate;/*alternate是奇数次的时候向前播放，偶数次向后播放*/
-o-animation: movearound 5s linear 2s infinite alternate;
animation-fill-mode:forwards;/*forwards是动画结束时保持最后一刻的状态；backwords是在动画有延迟播放的情况下，开始播放时迅速具有初始帧；both是元素同时具有forwards和backwords的属性'None是默认回到初始帧*/
}
@keyframes movearound{
0%{
transform:translateX(0);
}
25%{
transform:translateX(180px);
}
50%{
transform:translate(180px,180px);
}
75%{
transform:translate(0,180px);
background: blue;
}
100%{
transform:translateY(0);
background: red;
}
}
</style>
</head>
<body>
<div><span></span></div>
</body>
</html>