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

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

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

和transition動畫同樣，animation動畫也是CSS3動畫的一種，這類動畫能夠理解爲是一種關鍵幀動畫，它能夠預先爲動畫設置多個節點，在每一個節點中含有不一樣的狀態屬性，經過使用animation動畫咱們能夠獲得更爲複雜的動畫效果。

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

 

一、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屬性來爲該元素加強可訪問性，使得有閱讀障礙的瀏覽者不會被插入的僞元素中的無心義字符所困擾。

 

二、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屬性的配合才能產生動畫效果。

發現問題：當前的圖標只會旋轉一次，而後將中止下來。

 

三、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;
}

 

歡迎訪問：

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

 二、雲商城消費者門戶http://www.suningcloud.com/promotion/index/experience_center.html