css3制作動畫的幾個屬性：變形(transform)，過渡(transition)和動畫(animation)。
transform介紹過了。接下來介紹過渡transition。
一、例子
先通過一個例子感性認識一下transition的動畫效果。
鼠標放上去，div寬度從100px增大到200px。
<style type="text/css"> div{ width: 100px; height: 100px; background-color: red; } div:hover{ width: 200px; } </style> <div></div>
這效果其實也算是動畫，但是非常變化非常快，不平滑。
如果想讓鼠標放上去后div寬度在5s內平滑過渡到200px。只需要加一行代碼；
div:hover{ width: 200px; transition:width 5s ease-in; }
這里用到的就是transition屬性，它就是用來實現屬性值平滑過渡，視覺上產生動畫效果。
上面用的transition是縮寫，包含四個屬性:transition-property,transition-duration,transition-timing-function,transition-delay，下面會一一介紹。
二、transition
css3新增transition屬性，可以在事件觸發元素的樣式變化時，讓效果更加細膩平滑。
transition用來描述如何讓css屬性值在一段時間內平滑的從一個值過渡到另一個值。這種過渡效果可以在鼠標點擊、獲得焦點、被點擊或對元素任何改變中觸發。
語法：
transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
transition有四個屬性值：
transition-property:執行過渡的屬性。
transition-duration:指定完成過渡需要的時間。
transition-timing-function,在延續時間段，過渡變換的速率變化，簡單理解就是指定過渡函數。
transition-delay:過渡延遲時間。
1、transition-property
transition-property用來指定哪個屬性使用過渡動畫效果。
語法：
transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*
none:所有屬性都不應用過渡效果。
all：默認值。當值為all時，元素產生任何屬性值變化時都將執行transition效果。
ident：元素屬性名。通過ident指定具體哪些屬性。如果指定的多個屬性中有某個屬性不能應用過渡效果，其他屬性還是生效的。
過渡屬性只有具備一個中點值的屬性（需要產生動畫的屬性）才能具備過渡效果。在w3c中列出了所有可以實現transition效果的css屬性值以及值的類型，點這里查看。
Property Name Type
background-color as color
background-position as repeatable list of simple list of length, percentage, or calc
border-bottom-color as color
border-bottom-width as length
border-left-color as color
border-left-width as length
border-right-color as color
border-right-width as length
border-spacing as simple list of length
border-top-color as color
border-top-width as length
bottom as length, percentage, or calc
clip as rectangle
color as color
font-size as length
font-weight as font weight
height as length, percentage, or calc
left as length, percentage, or calc
letter-spacing as length
line-height as either number or length
margin-bottom as length
margin-left as length
margin-right as length
margin-top as length
max-height as length, percentage, or calc
max-width as length, percentage, or calc
min-height as length, percentage, or calc
min-width as length, percentage, or calc
opacity as number
outline-color as color
outline-width as length
padding-bottom as length
padding-left as length
padding-right as length
padding-top as length
right as length, percentage, or calc
text-indent as length, percentage, or calc
text-shadow as shadow list
top as length, percentage, or calc
vertical-align as length
visibility as visibility
width as length, percentage, or calc
word-spacing as length
z-index as integer
Note：並不是什么屬性改變都會觸發transiton動畫效果，比如頁面的自適應寬度，當瀏覽器改變寬度時，並不會觸發transition的效果。但上述表格所示的屬性類型改變都會觸發一個transition動作效果。
舉例：可以同時給幾個屬性設置動畫效果，比如給height和line-height同時設置動畫效果，實現div變高文字仍然垂直居中。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>變形與動畫</title> <style type="text/css"> div { width: 300px; height: 200px; line-height: 200px; text-align: center; background-color: orange; margin: 20px auto; -webkit-transition-property: height line-height; transition-property: height line-height; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-delay: .2s; transition-delay: .2s; } div:hover { height: 100px; line-height: 100px; } </style> </head> <body> <div>文字垂直居中</div> </body> </html>
2、transition-duration
transition-duration用來設置從舊屬性過渡到新屬性需要的時間，即持續時間。
3、transition-timing-function
語法：
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
transition-timing-function屬性指的是過渡的“緩動函數”。通過這個函數會建立一條加速度曲線，因此在整個transition變化過程中，變化速度可以不斷改變。主要包括以下幾種函數。
- ease:默認值，元素樣式從初始狀態過渡到終止狀態速度由快到慢，逐漸變慢。
- linear：意思是線性過渡，即過渡過程恆速。
- ease-in:速度越來越快，呈現加速狀態，通常稱為“漸顯效果”。
- ease-out:速度越來越慢，呈現減速狀態，通常稱為“漸隱效果”。
- ease-in-out速度先加速后減速，稱為“漸顯漸隱效果”。
舉例：鼠標經過問號，幫助信息漸顯漸隱。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>transition-demo by starof</title> <style> #help{ width:20px; height:20px; border-radius:10px; color:#fff; background:#000; text-align:center; position:relative; margin:50px 20px; cursor:pointer; } #help .tips{ position:absolute; width:300px; height:100px; background:#000; top:-30px; left:35px; border-radius:10px; opacity:0; /*漸隱效果*/ transition: opacity .8s ease-in-out; -moz-transition: opacity .8s ease-in-out; -webkit-transition: opacity .8s ease-in-out; } .tips:before{ content:""; border-width:10px; border-style:solid; border-color:transparent #000 transparent transparent; position:absolute; left:-20px; top:30px; } #help:hover .tips{ opacity:0.5; /*漸顯效果*/ transition: opacity .8s ease-in-out; -moz-transition: opacity .8s ease-in-out; -webkit-transition: opacity .8s ease-in-out; } </style> </head> <body> <div id="help"> ? <div class="tips">幫助信息</div> </div> </body> </html>
4、transition-delay
transition-delay設置改變屬性值后多長時間開始執行動畫。
5、屬性簡寫
在改變多個css屬性的transition效果時，把幾個transition聲明用逗號隔開，然后每個屬性就都有各自的過渡時間和效果。
Note：第一個時間是時長，第二個是延時。
a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}
三、貝塞爾曲線和transition
transition的數學模型就是貝塞爾曲線，下面介紹。
曲線其實就是兩點之間插值的效果，貝塞爾曲線是一種插值算法，比線性插值復雜一點。
貝塞爾曲線：起始點，終止點（也稱錨點），控制點。通過調整控制點，貝塞爾曲線的形狀發生變化。
k階貝塞爾插值算法需要k+1個控制點。
一階貝塞爾曲線（線段）：意思就是從P0到P1的連續點，用來描述一段線段。一次貝塞爾插值就是線性插值。
二階貝塞爾曲線（拋物線）：P0-P1是曲線在P0處的切線。
三階貝塞爾曲線：
transition用到的就是三階貝塞爾插值算法,如下圖。
時間在0,1區間，待變換屬性也認為是0,1區間。P0和P3的坐標一直是（0,0）和（1,1）。transition-timing-function屬性用來確定P1和P2的坐標。
ease [0, 0] [0.25, 0.1] [0.25, 1.0] [1.0,1.0]
linear [0, 0] [0.0, 0.0] [1.0, 1.0] [1.0,1.0]
ease-in [0, 0] [0.42, 0] [1.0, 1.0] [1.0,1.0]
ease-out [0, 0] [0, 0] [0.58, 1.0] [1.0,1.0]
ease-in-out [0, 0] [0.42, 0] [0.58, 1.0] [1.0,1.0]
step-start steps(1,start)
step-end steps(1,end)
cubic-bezier(x1,y1,x2,y2) [0, 0] [x1, y1] [x2, y2] [1.0,1.0]
四、其他相關資料
canvas畫貝塞爾曲線：查看來源
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>bezier demo</title> </head> <body> <div style="width:800px;height:600px;background-color:#fac0c0;"> <canvas id="cvs" width="800" height="600">騷瑞，您的瀏覽器不支持canvas</canvas> </div> <script type="text/javascript"> var cvs=document.getElementById("cvs"), context=cvs.getContext("2d"), points=[]; function getXY(node){ var x=0, y=0; if (node.offsetParent) { while (node.offsetParent) { x += node.offsetLeft; y += node.offsetTop; node = node.offsetParent; } } else { node.x && (x += node.x); node.y && (y += node.y); } return [x,y]; } function drawPoint(x,y,c,b) { !b && (b=2); context.fillStyle=c || "red"; context.fillRect(x,y,b,b); } function bezier(points,t){ var i, n=points.length-1, x=0, y=0; function fn(p,n,i,t){ return arrangement(n,i)*p*Math.pow(1-t,n-i)*Math.pow(t,i); } for(i=0;i<n+1;i++){ x+=fn(points[i][0],n,i,t); y+=fn(points[i][1],n,i,t); } return [x,y]; } function factorial(n){ if(isNaN(n) || n<=0 || Math.floor(n)!==n){ return 1; } var s=1; while(n){ s*=n--; } return s; } function arrangement(n,r){ return factorial(n)/(factorial(r)*factorial(n-r)); } cvs.addEventListener("click",function(event){ var i, point=getXY(this), x=event.clientX-point[0]+(document.documentElement.scrollLeft || document.body.scrollLeft), y=event.clientY-point[1]+(document.documentElement.scrollTop || document.body.scrollTop); points.push([x,y]); context.clearRect(0,0,screen.width,screen.height); context.beginPath(); //points for(i=0;i<points.length;i++){ drawPoint(points[i][0],points[i][1],"blue",4); } //bezier for (i = 0; i < 1; i += 0.001) { drawPoint.apply(this, bezier(points,i)); } //line if(points.length==1){ context.moveTo(points[0][0],points[0][1]); }else if (points.length>1){ for(i=0;i<points.length;i++){ context.lineTo(points[i][0],points[i][1]); } context.lineWidth=0.2; context.stroke(); context.closePath(); } },true); </script> </body> </html>
開發中可使用下面工具：
http://matthewlein.com/ceaser/
參考：
下面這篇文章沒有原理，但可以讓我們從設計師的角度去了解貝塞爾曲線。
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/4582367.html有問題歡迎與我討論，共同進步。