css3 動畫詳解

  css3動畫：1.transform;2.transition;3.animation; 下面分别詳細講解并解釋三者的差別

1. transform (變換) 單純的變化 瞬間完成 看不到變化過程

   使用方法：直接在樣式表中書寫即可；

.test:hover
{
    -moz-transform:rotate(5deg); //Firefox
    -webkit-transform:rotate(5deg); //Safari and Chrome 
    -o-transform:rotate(5deg); // Opera
    -ms-transform:rotate(5deg); //IE
    transform:rotate(5deg);
}
           

none：無轉換。

transform-origin：left buttom 以左下角為基準進行旋轉　

預設值為 center center 如果隻填一個值，則另一個值預設為center

matrix(1,1,1,1,1,1) 使用6哥值得矩陣。

translate(200px,300px) 水準移動200px，垂直移動300px

第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設值為0

translateX(20px)：X軸（水準方向）平移 20px

translateY(20px)：Y軸（垂直方向）平移 20px

rotate(20deg): 順時針旋轉20度

rotateX(180deg): 3D 圍繞X軸旋轉180度

rotateY(180deg): 3D 圍繞Y軸旋轉180度

scale(2,3)：水準放大2倍 垂直放大3倍

指定對象的縮放，第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，

則預設取第一個參數的值

scaleX(2) 水準放大2倍

scaleY(2) 垂直放大2倍

skew(30deg，40deg) 水準斜切扭曲30度 垂直斜切扭曲40deg

第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設值為0

skewX(30deg)：X軸(水準方向)扭曲30度

skewY(40deg)：Y軸(垂直方向)扭曲40度

2. transition (過渡) 結合transform 看到其變化的過程

div
{
    width:100px;
    height:100px;
    background:yellow;

    transition:width 2s, height 2s;
    -webkit-transition:width 2s ease-in 3s, height 2s, -webkit-transform 2s 2s; /* Safari and Chrome */

}

div:hover
{
    width:200px;
    height:200px;
    transform:rotate(180deg);
    -webkit-transform:rotate(180deg); /* Safari and Chrome */
}
           

與transform結合使用，同時必須是原先已經定義的屬性，才可進行變化。

如上例中的：width height transform:rotate(180deg)

transition:width 2s ease-in 3s

width ( transition-property ) : 檢索或設定對象中的參與過渡的屬性

all : 代表所有屬性都進行變化

none : 不指定過渡的css屬性

2s ( transition-duration ) : 檢索或設定對象過渡的持續時間

ease-in ( transition-timing-function ): 檢索或設定對象中過渡的動畫類型

3s ( transition-delay ): 檢索或設定對象延遲過渡的時間

transition-timing-function

1、ease：（逐漸變慢）預設值，ease函數等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).

2、linear：（勻速），linear 函數等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函數等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).

4、ease-out：（減速），ease-out 函數等同于貝塞爾曲線(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然後減速），ease-in-out 函數等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（該值允許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1,

x2, y2)四個值特定于曲線上點P1和點P2。所有值需在[0, 1]區域内，否則無效。

實作先執行什麼動畫，再執行什麼動畫的技巧是：使用延遲。即：transition-delay

參考連結：http://www.w3cplus.com/content/css3-transition

3. animation (動畫) 結合 transform

div{
    width: 100px;
    height: 100px;
    background: red;
    position: relative;

    animation: myfirst 5s ease 5s 1 alternate paused forwards;

    color: white;
}

@keyframes myfirst {
    0% {left: 0px; top: 0px;transform: rotateY(0deg) }
    /*25% {left: 100px;  top: 0px }*/
    50% {left: 300px;  top: 0px;transform: rotateY(0deg)}
    /*75% {left: 400px;  top: 0px }*/
    100% {left: 300px;  top: 0px;transform: rotateY(720deg)}
}
           

animation: myfirst 5s ease 5s 1 alternate forwards;

myfirst [ animation-name ]：動畫名稱

5s [ animation-duration ]: 動畫的持續時間

ease [ animation-timing-function ]: 動畫的過渡類型

同transition的過渡類型

5s [ animation-delay ]: 動畫延遲的時間

1 [ animation-iteration-count ]: 動畫的循環次數

infinite 無限循環

alternate [ animation-direction ]: 動畫在循環中是否反向運動

normal 預設值 正向方向 不反向

alternate 為正常與反向交替運動，

具體：第偶數次正向運動，第奇數次向反方向運動

forwards [ animation-fill-mode ]:元素在動畫開始前後的狀态是否根據動畫設定中“0%”、“100%”的狀态設定

取值可以為 none、forwards、backwards 或 both。

預設為 none ：動畫過程中“0%”、“100%”的狀态不會設定為元素開始和結束的狀态

backwards 和 forwards 則分别設定開始和結束的狀态，both 則同時設定兩個的狀态。

backwaeds/none 使對象回到 0 0 狀态

forwards/both 使對象保持在終态，不回撤

若加入 forwards 屬性，則在動畫結束後元素會保留在 100% 時動畫設定的位置而不回撤。

三者差別

1.transform 和 transition 需要經過使用者觸發才會表現出動态的效果。

2.這些觸發條件可以是:link、:visited、:hover、:active 和 :focus 五個 CSS 僞類，也可以是

click、focus 等 JavaScirpt 事件。

3.如果沒有設定觸發條件而直接給元素設定 transform 或 transition ，使用者隻能看到元素的終态

而沒有動畫過程。

4.animation 則無須觸發條件，開發者隻需為元素綁定動畫即可。

5.在舊版本的 animation 中，animation 、transform 以及 transition 都有一個重要的性質——過

程執行完畢後會回撤。

新版的animation添加了animation-fill-mode 屬性(none/backwards/forwards/both) 彌補了

這個缺陷。

6.例如以 :hover 觸發 transform ，在滑鼠離開元素後動畫自動反向播放，使到元素回到

transform 之前的狀态。

7.animation 也會在動畫結束後復原，但不會反向播放動畫，而是直接跳到動畫播放之前的動

态。

參考：http://kayosite.com/css3-animation.html

3D效果

參考 http://kayosite.com/more-about-css3-transformation.html

相容性

參考 http://caniuse.com/