css3的動畫特效--元素旋轉（transition，animation）

開發中，視覺要你實現一個元素的旋轉問題，比如說如下圖所示：

思路：首先動畫動效肯定離不開anmimation動畫。

和transition動畫一樣，animation動畫也是CSS3動畫的一種，這類動畫可以理解為是一種關鍵幀動畫，它可以預先為動畫設置多個節點，在每個節點中含有不同的狀態屬性，通過使用animation動畫我們可以得到更為復雜的動畫效果。

注意：transition是為頁面元素設置某個需要產生動畫效果的屬性，如寬度（width）、高度（height）、透明度（opacity），甚至3D旋轉等，并使得這些屬性的值在發生變化時產生相應的過渡效果。我們常常在制作類似按鈕鼠標經過和移出效果時使用transition。通俗地說，transition是簡化版的CSS3動畫，而animation則是強化版的CSS3動畫。在日常開發中transition的使用頻率更高一些，我們往往只有在遇到transition無法解決的問題時，才會轉而使用animation。

1、dom元素準備

準備一個span元素作為圖標的載體（也可以使用其他元素，如div、a、button等）

<span class="close">Close</span>

使用設置了icon字體的偽元素來生成圖標圖案，首先引入這個font-family

@font-face {font-family: 'icon-font';src: url('font/flat-ui-icons-regular.ttf'), url('font/flat-ui-icons-regular.eot'), url('font/flat-ui-icons-regular.woff'), url('font/flat-ui-icons-regular.svg');}.close {font-size: 0px;/*使span中的文字不顯示*/cursor: pointer;/*使鼠標指針顯示為手型*/display: block;width: 20px;height: 30px;line-height: 42px;border-radius: 50%;/*使背景形狀顯示為圓形*/background: #FFF;color: #8b8ab3;text-align: center;}.close::before {content: "\e609";font-family: 'icon-font';speak: none;font-size: 20px;display: block;}

添加了speak:none屬性來為該元素增強可訪問性，使得有閱讀障礙的瀏覽者不會被插入的偽元素中的無意義字符所困擾。

2、transition使用

為鼠標指針的滑過狀態設置一些動畫效果。在此，我們希望當鼠標指針滑過時，圖標在1秒內勻速旋轉360度。我們在此先復習一下transition動畫的用法。

.close:hover::before{-webkit-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:-webkit-transform 1s linear;transition:transform 1s linear; }

代碼中，我們使用了transform屬性來實現圖標的旋轉，并且設置了transition動畫，將變化的屬性名稱設置為transform。測試頁面，現在我們將看到圖標的旋轉效果。

PS：在設置旋轉屬性時，需要加上deg作為度數單位，即使是旋轉0度也需要同樣添加這一單位。此外，transform只是一種變換屬性，其本身不能生成動畫效果，它只能通過與transition或animation屬性的配合才能產生動畫效果。

發現問題：當前的圖標只會旋轉一次，然后將停止下來。

3、animation屬性

而如果我們希望圖標能夠一直不停旋轉，則需要請出animation動畫。使用animation動畫的前提是先制作動畫的各個關鍵幀。

@-webkit-keyframes spin {from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);}}@keyframes spin {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}

我們使用了keyframes關鍵字來定義了一個名為spin的關鍵幀動畫，在該動畫中使用了from關鍵字來指定動畫的起始狀態，to關鍵字來指定動畫的結束狀態。在起始狀態中設置transform屬性的旋轉度為0度，在結束狀態中設置該旋轉度為360度。此外，我們還添加了-webkit-前綴以確保動畫在webkit瀏覽器中的兼容性。

指定了spin關鍵幀動畫后，我們就可以在圖標中運用這一動畫，代碼如下：

.close:hover::before {/*-webkit-transform: rotate(360deg);transform: rotate(360deg);-webkit-transition: -webkit-transform 1s linear;transition: transform 1s linear;*/-webkit-animation: spin 1s linear 1s 5 alternate;animation: spin 1s linear infinite;}

在以上代碼中，我們設置了鼠標滑過狀態下偽元素的animation屬性，該屬性的第一個參數是動畫名稱，即spin，第2個參數是動畫時長，在此設置為1秒，第3個屬性為速度曲線，在此設置為勻速運動，第4個屬性infinite參數表示動畫將無限循環，如果我們只希望動畫循環一定次數，則可以將其修改為相應的數字，一次可以不用設置。

animation動畫添加各種參數

（1）infinite參數，表示動畫將無限循環。在速度曲線和播放次數之間還可以插入一個時間參數，用以設置動畫延遲的時間。如希望使圖標在1秒鐘后再開始旋轉，并旋轉兩次，代碼如下

.close:hover::before{-webkit-animation: spin 1s linear 1s 2;animation: spin 1s linear 1s 2; }

（2）alternate參數。animation動畫中加入反向播放參數alternate。在加入該參數后，動畫將在偶數次數時反向播放動畫。

.close:hover::before{-webkit-animation: spin 1s linear 1s 2 alternate;animation: spin 1s linear 1s 2 alternate; }

歡迎訪問：

1、云商城isv系統http://isv.suningcloud.com/mpisv-web/index

?2、云商城消費者門戶http://www.suningcloud.com/promotion/index/experience_center.html

文中有錯誤的地方希望指出，共同進步

總結

以上是生活随笔為你收集整理的css3的动画特效--元素旋转（transition，animation）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。