通常我们在项目中或多或者的会遇到这样的动画效果，让一个元素转起来。
直接看代码：
如下
/*
turn : 定义的动画名称
1s : 动画时间
linear : 动画以何种运行轨迹完成一个周期
infinite :规定动画应该无限次播放
*/
<style>
.box{
width:200px;
height: 200px;
background: red;
animation:turn 4s linear infinite;
margin: 100px auto;
}
//定义动画
@keyframes turn{
0%{-webkit-transform:rotate(0deg);}
25%{-webkit-transform:rotate(90deg);}
50%{-webkit-transform:rotate(180deg);}
75%{-webkit-transform:rotate(270deg);}
100%{-webkit-transform:rotate(360deg);}
}
</style>
<body>
<div class="box"></div>
</body>