css3動畫屬性詳解之transform、transition、animation

css3動畫屬性詳解：

關於CSS3製做動畫的幾個屬性：變形(transform)、轉換(transition)和動畫(animation)。

1、transform

屬性：

旋轉rotate（中心爲原點）
扭曲、傾斜skew（skew(x,y), skewX(x), skewY(y)）
縮放scale（scale(x,y), scaleX(x), scaleY(y)）
移動translate（translateX,translateY）
矩陣變形matrix。

各個屬性的用法：

• transform:rotate()：旋轉；其中「10deg」表示「10度」。

transform: rotate(10deg);

• transform:skew()：傾斜；

transform: skew(20deg);

• transform:scale()：比例；「1.5」表示以1.5的比例放大，若是要放大2倍，須寫成「2.0」，縮小則爲負「-」。

transform: scale(1.5);

• transform:translate()：變更，位移；以下表示向右位移120像素，若是向上位移，把後面的「0」改個值就行，向左向下位移則爲負「-」。

transform: translate(120px,0);

• 綜合在一塊兒：(效果是動態)

.demo{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
.demo:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}

2、transition

css的transition容許css的屬性值在必定的時間區間內平滑地過渡。

四個屬性：

1. transition-property是用來指定當元素其中一個屬性改變時執行transition效果，其主要有如下幾個值：none(沒有屬性改變)；all（全部屬性改變）這個也是其默認值；indent（元素屬性名）。當其值爲none時，transition立刻中止執行，當指定爲all時，則元素產生任何屬性值變化時都將執行transition效果，ident是能夠指定元素的某一個屬性值。

2. transition-duration是用來指定元素,轉換過程的持續時間

3. transition-timing-function:

4. transition-delay[延遲] ：是用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行transition效果

綜上所述，相對應的一個示例代碼：

a {
    transition: background 0.5s ease-in,color 0.3s ease-out;
    transition：transform .4s ease-in-out;
  }

縮略圖實例（原文：Anselm Urban）：http://codepen.io/SitePoint/p...

3、animation（@keyframes規則）

CSS3中添加的新屬性animation是用來爲元素實現動畫效果的，可是animation沒法單獨擔當起實現動畫的效果。承載動畫的另外一個屬性——@keyframes。使用的時候爲了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前綴以適應不一樣的瀏覽器。

• 建立動畫的原理是，將一套 CSS 樣式逐漸變化爲另外一套樣式。

• 經過 @keyframes 規則，您可以建立動畫。

• @keyframes定義一個動畫，並定義具體的動畫效果，好比是放大仍是位移等等。

• @keyframes 它定義的動畫並不直接執行，須要藉助animation來運轉。

• 在動畫過程當中，您可以屢次改變這套 CSS 樣式。

• 以百分比來規定改變發生的時間，或者經過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。

  百分比是指動畫完成一遍的時間長度的的百分比 ，0% 是動畫的開始時間，50%是動畫完成一半的時間，100% 動畫的結束時間。百分比後面的花括號寫：在動畫執行過程當中的某時間點要完成的變化。

• 爲了得到最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。

---

語法

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定義動畫的名稱。
keyframes-selector	必需。定義動畫的名稱。 合法的值： 1. 0-100% 2. from（與 0% 相同） 3. to（與 100% 相同）
css-styles	必需。一個或多個合法的 CSS 樣式屬性。

例子1：

名字爲gif的@keyframes ，動畫完成須要的總時長爲1.4s,剛開始的時候圖片旋轉爲0度，動畫完成的時候圖片旋轉360度

.load-border {
    width: 120px;
    height: 120px;
    background: url(../images/loading_icon.png) no-repeat center center;
    -webkit-animation: gif 1.4s infinite linear;
    animation: gif 1.4s infinite linear; 
}
@keyframes gif {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

例子2：

名字爲mymove的@keyframes ，動畫完成須要的總時長爲1s,剛開始的時候圖片距頂部距離爲0px，0.25s後圖片距頂部距離爲200px，0.5s後圖片距頂部的距離爲100px，以此類推

.img {
    width: 120px;
    height: 120px;
    background: url(../images/icon.png) no-repeat center center;
    -webkit-animation: gif 1.4s infinite linear;
    animation: mymove 1s infinite linear;
}
@keyframes mymove
{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

例子3：

在一個動畫中改變多個 CSS 樣式：

@keyframes mymove
{
    0%   {top:0px; background:red; width:100px;}
    100% {top:200px; background:yellow; width:300px;}
}