本文轉自segmentfault.com/a/1190000004460780#articleHeader5

css3動畫屬性詳解：

關於CSS3製作動畫的幾個屬性：變形(transform)、轉換(transition)和動畫(animation)。
一、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)}
二、transition
css的transition允許css的屬性值在一定的時間區間內平滑地過渡。

四個屬性：
transition-property是用來指定當元素其中一個屬性改變時執行transition效果，其主要有以下幾個值：none(沒有屬性改變)；all（所有屬性改變）這個也是其預設值；indent（元素屬性名）。當其值為none時，transition馬上停止執行，當指定為all時，則元素產生任何屬性值變化時都將執行transition效果，ident是可以指定元素的某一個屬性值。
transition-duration是用來指定元素,轉換過程的持續時間
transition-timing-function: 
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...點選預覽

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