通常我們在項目中或多或者的會遇到這樣的動畫效果，讓一個元素轉起來。
直接看代碼：
如下
/*
turn : 定義的動畫名稱
3s : 動畫時間
linear : 動畫以何種運行軌跡完成一個周期
infinite :規定動畫應該無限次播放
*/
<style>
.box{
width:200px;
height: 200px;
background: red;
animation:turn 3s 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>
