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

時間 2019-11-24

標籤 css3 css 變形 transform 過渡 transition 動畫 animation 學習欄目 CSS 简体版

原文原文鏈接

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

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

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

1、變形transform

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

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軸旋轉spa

.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軸同時縮放3d

<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：旋轉的時候背景不可見。

2、過渡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

3、動畫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：動畫會循環正反方向交替運動，奇數次（一、三、5……）會正常運動，偶數次（二、四、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;
        }