@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
使一个盒子无限制次数移动变色并旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:150px;
height:150px;
margin:50px;
background:#f00;
border-radius:50%;
display:table-cell;
vertical-align:middle;
text-align:center;
color:#fff;
font-size:20px;
animation: my 5s infinite;
}
/* 动画效果 */
@keyframes my{
0%{ transform: rotate(30deg);
}
25%{transform:translate(500px ,0px) rotate(0deg);background:#0f0;}
50%{transform:translate(0px,0px) rotate(360deg);background:#00f}
100%{transform:translate(0px,0px) rotate(360deg);}
}
</style>
</head>
<body>
<div>一段文字</div>
</body>
</html>