使用css3屬性做一個循環旋轉的動畫

做這個動畫是使用css3中的animation 和 @-webkit-keyframes 組合使用來完成

//這是html部分代碼
<div class="home">
 <img
 alt="logo"
 src="http://b-ssl.duitang.com/uploads/item/201206/26/20120626190359_MjB3s.jpeg"
 id="images"
 style="width: 200px;height: 200px;border-radius: 50%;"




 />
 </div>
 //這是css部分代碼
 #images {
 -webkit-animation: spin 5s linear infinite;
 animation: spin 5s linear infinite;
}
@keyframes spin {
 from {
 transform: rotate(0deg);
 }
 to {
 transform: rotate(360deg);
 transition: all 5s;
 }
}

上面的代碼粘貼後直接就能運行，也可以綁定觸發器，例如：#images 可以寫為 #images:hover 表示給綁定了一個觸發器hover，當鼠標在圖片上方時動畫才執行

下面我們簡單介紹一下animation和@-webkit-keyframes的屬性

animation （在使用的時候可以加上-webkit-做下兼容處理）是一個複合屬性，定義如下： animation: name duration timing-function delay iteration_count direction name: 是 @-webkit-keyframes 中需要指定的方法，用來執行動畫。
duration: 動畫一個周期執行的時長。
timing-function: 動畫執行的效果，可以是線性的，也可以是"快速進入慢速出來"等。
delay: 動畫延時執行的時長，如果不需要可以省略。
iteration_count: 動畫循環執行次數，如果是infinite，則無限執行。
direction: 動畫執行方向，省略的話默認順時針。
@-webkit-keyframes 為創建動畫
@keyframes規則——指定一個CSS樣式，動畫將逐步更改樣式。可以改變任意多的樣式任意多的次數。 其中from和to 兩個屬性，“from” 和 "to"來規定變化發生的時間，就是指定動畫執行的初始值和結束值。也可以用百分比，“from” 和 "to"分別等同於 %和100%，0%是動畫的開始，100%是動畫的完成。 -webkit-animation-play-state:paused; 暫停動畫的執行。

animation和transition的區別

能實現動態效果的除了animation還有transition transition只能從一組css屬性變成另一組css屬性。animation則可以在多組屬性之間變換。 transition必須使用觸發器觸發，animation可以使用觸發器，也可以在頁面加載完成的時候自動觸發
想仔細了解各個屬性的話可以看一下這篇文章，感覺寫的很詳細，https://www.cnblogs.com/bobodeboke/p/6252869.html