CSS3的變形transform、過渡transition、動畫animation學習

學習CSS3動畫animation得先了解一些關於變形transform、過渡transition的知識

這些新屬性大多在新版瀏覽器得到了支持，有些需要添加瀏覽器前綴（-webkit-、-moz-、-ms-、-o-），本文為簡化內容，直接使用了原版屬性

根據不同屬性的支持度，在實際使用的時候需要添加相應的瀏覽器前綴支持

目錄：

1. 變形transform
2. 過渡transition
3. 動畫animation

 

一、變形transform

變形有rotate旋轉、scale縮放、translate位移、skew傾斜、matrix矩陣變形、perspective透視幾種操作，通過例子來了解各個操作

1. 初始頁面結構

    <style type="text/css">
        html {
            font-family: Arial;
        }

        .box {
            position: relative;
            margin: 200px auto;
            width: 100px;
            height: 20px;
            text-align: center;
            border: 1px solid #ddd;
            background-color: #75e275;
            cursor: pointer;
        }

        .left,
        .right {
            position: absolute;
            top: -10px;
            width: 10px;
            height: 40px;
            background-color: #4d8aeb;
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }

        .box:hover {
            transform: rotate(-30deg);
        }
    </style>    

　　<div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>

2. 變形操作

　　1）旋轉 transform: rotate(<angle>);    angle取值有：角度值deg，弧度值rad，梯度gard，轉/圈turn，正數值代表順時針旋轉，反之逆時針

.box:hover {
    transform: rotate(-30deg);
}

如果對元素本身或者元素設置了perspective值（用於設置查看者的位置），那么rotate3d()函數可以實現一個3維空間內的旋轉

rotateX(angele),相當於rotate3d(1,0,0,angle)指定在3維空間內的X軸旋轉

rotateY(angele),相當於rotate3d(0,1,0,angle)指定在3維空間內的Y軸旋轉

rotateZ(angele),相當於rotate3d(0,0,1,angle)指定在3維空間內的Z軸旋轉

.box:hover {
    transform: perspective(300px) rotateY(120deg);
}

.box:hover {
    transform: rotateY(120deg);
}

.box:hover {
    transform: rotate3d(1, 0, 0, 45deg);
}

　　2）縮放 transform: scale(<number>[, <number>]); 表示使元素在X軸和Y軸同時縮放

<number>表示縮放倍數，可以是正數，負數和小數。負數是先翻轉元素然后再縮放。包含兩個參數，如果缺少第二個參數，那么第二個參數的值等於第一個參數。

scaleX(<number>):表示只在X軸(水平方向)縮放元素。

scaleY(<number>):表示只在Y軸(垂直方向)縮放元素。

scaleZ(<number>):表示只在Z軸縮放元素。前提是元素本身或者元素的父元素設定了透視值

同樣的，有scale3d(x, y, z)

.box:hover {
    transform: scale(1.5);
}

.box:hover {
    transform: scale(2, 1);
}

.box:hover {
    transform: scaleY(1.5);
}

　　3）位移 transform: translate(<translation-value>[, <translation-value>]); 表示使元素在X軸和Y軸同時移動

<translation-value>表示位移量。包含兩個參數，如果省略了第二個參數則第二個參數為0；如果參數為負，則表示往相反的方向移動。

translateX(<translation-value>);表示只在X軸(水平方向)移動元素。

translateY(<translation-value>);表示只在Y軸(垂直方向)移動元素。

translateZ(<translation-value>);表示只在Z軸移動元素，前提是元素本身或者元素的父元素設定了透視值

同樣的，有transform(x, y, z)

.box:hover {
    transform: translate(100px);
}

.box:hover {
    transform: translate(-30px, 50px);
}

　　4）傾斜 transform: skew(<angle> [,<angle>]); 包含兩個參數值，分別表示X軸和Y軸傾斜的角度，取值類型為角度值deg

如果第二個參數為空，則默認為0，參數為負表示向相反方向傾斜。

skewX(<angle>);表示只在X軸(水平方向)傾斜

skewY(<angle>);表示只在Y軸(垂直方向)傾斜

.box:hover {
    transform: skewX(30deg);
}

.box:hover {
    transform: skew(30deg, 30deg);
}

　　5）矩陣變形 transform: matrix(<number>,<number>,<number>,<number>,<number>,<number>); 

matrix()是矩陣函數，以一個含六值的(a,c,e,b,d,f)變換矩陣的形式指定一個2D變換，相當於直接應用一個[a c e b d f]變換矩陣，其中c和e用正弦或余弦值表示

這六個參數實際上是一個3*3的矩陣:

.box:hover {
    transform: matrix(1, 0, 0, 2, 40, 20);
}

同樣的，可用matrix3d定義3D轉換，其是一個使用 了16 個值的 4x4 矩陣

 

　　6）透視 transform: perspective(length); 設置查看者的位置，並將可視內容映射到一個視錐上，繼而投影到一個 2D 視平面上
透視還可以直接定義成屬性 perspective: <length>，但其是設置所有的子元素有一個共同的透視值

其對於 3D 變換來說至關重要，如果不指定透視，則 Z 空間中的所有點將平鋪到同一個 2D 視平面中，並且變換結果中將不存透視深概念。作用於元素的子元素。

如下兩種樣式定義，結果相同

body {
    perspective: 300px;
}
.box:hover {
    transform: rotateY(30deg);
}

.box:hover {
    transform: perspective(300px) rotateY(30deg);
}

　　7) transfrom相關的其他屬性

除了transform之外，還有一些變換相關的屬性，這幾個屬性很少用到，還沒理解到位...

• transform-origin 變形原點 -- 允許你改變被轉換元素的位置
• transform-style  3D呈現 -- 規定被嵌套元素如何在 3D 空間中顯示
• perspective-origin  透視原點 -- 規定 3D 元素的底部位置
• backface-visibility  隱藏內容的背面 -- 定義元素在不面對屏幕時是否可見

 

　　7-1）transform-origin

該屬性提供2個參數值，第一個用於橫坐標，第二個用於縱坐標；如果只提供一個，該值將用於橫坐標，縱坐標將默認為50%。

percentage：用百分比指定坐標值。可以為負值。

length：用長度值指定坐標值。可以為負值。

left center right是水平方向取值，而top center bottom是垂直方向的取值。

.box:hover {
    transform-origin: left;
    transform: rotate(30deg);
}

　　7-2) transform-style　　

設置內嵌的元素在 3D 空間如何呈現。有兩個值：flat：所有子元素在 2D 平面呈現；preserve-3d：保留3D空間

 

　　7-3) perspective-origin

該屬性定義在X軸和Y軸的3D元素。這個屬性允許你改變3D元素的底部位置。定義時的perspective-origin屬性，它是一個元素的子元素，透視圖，而不是元素本身。
使用此屬性必須和perspective屬性一起使用，只影響3D轉換的元素

該屬性提供2個參數值，第一個用於橫坐標，第二個用於縱坐標；如果只提供一個，該值將用於橫坐標，縱坐標將默認為50%。

percentage：用百分比指定坐標值。可以為負值。

length：用長度值指定坐標值。可以為負值。

left,center right是水平方向取值，而top center bottom是垂直方向的取值。

　　

　　7-4）backface-visibility

該屬性可用於隱藏內容的背面。默認情況下，背面可見，這意味着即使在翻轉后，變換的內容仍然可見。但當 backface-visibility 設置為 hidden 時，旋轉后內容將隱藏，因為旋轉后正面將不再可見。取值有：

visible：默認值，旋轉的時候背景可見。

hidden：旋轉的時候背景不可見。

 

二、過渡transition

過渡transition是一個復合屬性，可以同時定義transition-property、transition-duration、transition-timing-function、transition-delay子屬性值

頁面結構如上，根據例子熟悉這些屬性

1. 綜合transition  可同時設置四個子屬性值

        .box {
            position: relative;
            margin: 200px auto;
            width: 100px;
            height: 20px;
            text-align: center;
            border: 1px solid #ddd;
            background-color: #75e275;
            cursor: pointer;

            transition: 2s background-color;
        }            

        .box:hover {
            background-color: #0f0;
        }    

2.transition-property 需要過渡的屬性 all | none | <property>[ ,<property> ]

transition-duration: 2s;
transition-property: height,background-color

        .box:hover {
            width: 130px;
            height: 30px;
            background-color: #0f0;
        }    

3. transition-duration設置動畫過渡的時間[執行時間]，默認值0表示不過渡直接看到執行后的結果。單位是秒s，也可以是毫秒ms

4.transition-delay設置動畫延遲執行的時間，默認值0表示立即執行，時間可以是正數也可以是負數，負數表示截斷規定時間內的動畫。單位是秒s，也可以是毫秒ms

transition-delay: 1000ms;
transition-duration: 2s;
transition-property: height,background-color

5. transition-timing-function設置動畫的過渡效果，默認值ease，取值有

ease：緩解效果，等同於cubic-bezier(0.25,0.1,0.25,1.0)函數，既立方貝塞爾

linear：線性效果，等同於cubic-bezier(0.0,0.0,1.0,1.0)函數

ease-in：漸顯效果，等同於cubic-bezier(0.42,0,1.0,1.0)函數

ease-out：漸隱效果，等同於cubic-bezier(0,0,0.58,1.0)函數

ease-in-out：漸顯漸隱效果，等同於cubic-bezier(0.42,0,0.58,1.0)函數

cubic-bezier：特殊的立方貝塞爾曲線效果

transition-timing-function: linear;
transition-delay: 1000ms;
transition-duration: 2s;
transition-property: height,background-color

 

三、動畫animation

動畫的使用，首先通過@（-webkit-)keyframes 定義動畫名稱及動畫的行為，再通過animation屬性設置動畫特征相關值進行調用

        @keyframes test {
            from {
                width: 100px;
                height: 20px;
            }

            50% {
                height: 50px;
            }

            to {
                width: 130px;
                height: 30px;
                background-color: #0f0;
            }
        }

        .box:hover {
            animation: test 2s;
        }

以上代碼設置了一個名稱為test的動畫，動畫執行時間為2s，定義了從開始（from|0%)到結束(to|100%)的動畫行為，開始的from可以省略，但結束的不可省略

見效果圖

1. 綜合animation ，可同時定義多個子屬性

2. animation-name 動畫名稱，需與@keyframes中設置的一致

3. animation-duration 動畫執行時間  <time>：正數，單位可以是秒(s)或者毫秒(ms)。默認值為0，表明動畫不執行

4. animation-delay 動畫延遲時間  默認值0表示立即執行，正數為動畫延遲一定時間，負數為截斷一定時間內的動畫。單位為秒(s)或毫秒(s)

5. animation-timing-function 動畫的過渡類型，取值有：

ease：緩解效果，等同於cubic-bezier(0.25,0.1,0.25,1.0)函數，既立方貝塞爾。

linear：線性效果，等同於cubic-bezier(0.0,0.0,1.0,1.0)函數。

ease-in：漸顯效果，等同於cubic-bezier(0.42,0,1.0,1.0)函數。

ease-out：漸隱效果，等同於cubic-bezier(0,0,0.58,1.0)函數。

ease-in-out：漸顯漸隱效果，等同於cubic-bezier(0.42,0,0.58,1.0)函數。

step-start：馬上轉跳到動畫結束狀態。

step-end：保持動畫開始狀態，直到動畫執行時間結束，馬上轉跳到動畫結束狀態。

steps(<number>[, [ start | end ] ]?)：第一個參數number為指定的間隔數，即把動畫分為n步階段性展示，第二個參數默認為end，設置最后一步的狀態，start為結束時的狀態，end為開始時的狀態，若設置與animation-fill-mode的效果沖突，而以animation-fill-mode的設置為動畫結束的狀態。

cubic-bezier(<number>, <number>, <number>, <number>)：特殊的立方貝塞爾曲線效果。

        @keyframes test {
            to {
                transform: rotate(1turn);
            }
        }

        .box:hover {
            animation-name: test;
            animation-duration: 2s;
            animation-delay: -.5s;
            animation-iteration-count: 2;
            animation-timing-function: linear;
        }

值得注意的是steps中number參數的意義， 關於steps的參數解析

        @keyframes test {
            50% {
                width: 130px;
            }

            100% {
                width: 160px;
            }
        }

        .box:hover {
            animation-name: test;
            animation-duration: 1s;
            animation-timing-function: steps(5);
            animation-fill-mode: forwards;
        }

steps(5)表示將動畫行為中的每個間隔分成5段來進行，即0-50%分成5段，50%-100%分成5段 

6. animation-iteration-count: <number>|infinite; 指定對象動畫循環播放的次數。 infinite為無限循環

7. animation-direction 指定對象動畫運動的方向

normal：正常方向，默認。

reverse：動畫反向運行,方向始終與normal相反。（FF14.0.1以下不支持）

alternate：動畫會循環正反方向交替運動，奇數次（1、3、5……）會正常運動，偶數次（2、4、6……）會反向運動，即所有相關聯的值都會反向。

alternate-reverse：動畫從反向開始，再正反方向交替運動，運動方向始終與alternate定義的相反。（FF14.0.1以下不支持）

animation-direction: alternate-reverse;

 

8. animation-fill-mode: 檢索或設置對象動畫時間之外的狀態，取值有

none：默認值。不設置對象動畫之外的狀態

forwards：結束后保持動畫結束時的狀態，但當animation-direction為0，則動畫不執行，持續保持動畫開始時的狀態

backwards：結束后返回動畫開始時的狀態

both：結束后可遵循forwards和backwards兩個規則

        @keyframes test {
            to {
                width: 130px;
            }
        }

        .box:hover {
            animation-name: test;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-fill-mode: backwards;
        }    

animation-fill-mode: forwards; /* or both */

 

9. animation-play-state: running | paused 檢索或設置對象動畫的狀態，running為默認值

        @keyframes test {
            to {
                transform-origin: center center;
                transform: rotate(1turn);
            }
        }

        .box {
            animation-name: test;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;
        }

        .box:hover {
            animation-play-state: paused;
        }