快捷導(dǎo)航

Css3制作變形與動(dòng)畫(huà)效果

更新時(shí)間：2015年07月24日 15:11:06 作者：starof

這篇文章主要介紹了Css3制作變形與動(dòng)畫(huà)效果，css3制作動(dòng)畫(huà)主要用到：變形(transform)，過(guò)渡(transition)和動(dòng)畫(huà)(animation)三個(gè)屬性,需要的朋友可以參考下

下面通過(guò)圖文并茂的方式給大家展示下css3制作變形與動(dòng)畫(huà)效果

css3制作動(dòng)畫(huà)的幾個(gè)屬性：變形(transform)，過(guò)渡(transition)和動(dòng)畫(huà)(animation)。

下面介紹：過(guò)渡transition。

一、例子

先通過(guò)一個(gè)例子感性認(rèn)識(shí)一下transition的動(dòng)畫(huà)效果。

鼠標(biāo)放上去，div寬度從100px增大到200px。

<style type="text/css"> 
div{  
width: 100px; 
height: 100px;  
background-color: red; 
} 
div:hover{ 
width: 200px; 
}</style><div></div>

這效果其實(shí)也算是動(dòng)畫(huà)，但是非常變化非?？?，不平滑。

如果想讓鼠標(biāo)放上去后div寬度在5s內(nèi)平滑過(guò)渡到200px。只需要加一行代碼；

復(fù)制代碼代碼如下:

div:hover{   

width: 200px;   

transition:width 5s ease-in;}

這效果其實(shí)也算是動(dòng)畫(huà)，但是非常變化非?？?，不平滑。

如果想讓鼠標(biāo)放上去后div寬度在5s內(nèi)平滑過(guò)渡到200px。只需要加一行代碼；

復(fù)制代碼代碼如下:

div:hover{   

width: 200px;  

transition:width 5s ease-in;}

這里用到的就是transition屬性，它就是用來(lái)實(shí)現(xiàn)屬性值平滑過(guò)渡，視覺(jué)上產(chǎn)生動(dòng)畫(huà)效果。

上面用的transition是縮寫(xiě)，包含四個(gè)屬性:transition-property,transition-duration,transition-timing-function,transition-delay，下面會(huì)一一介紹。

二、transition

css3新增transition屬性，可以在事件觸發(fā)元素的樣式變化時(shí)，讓效果更加細(xì)膩平滑。

transition用來(lái)描述如何讓css屬性值在一段時(shí)間內(nèi)平滑的從一個(gè)值過(guò)渡到另一個(gè)值。這種過(guò)渡效果可以在鼠標(biāo)點(diǎn)擊、獲得焦點(diǎn)、被點(diǎn)擊或對(duì)元素任何改變中觸發(fā)。

語(yǔ)法：

transition ：
[<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> ||
<'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || 
<'transition-timing-function'> || <'transition-delay'>]]*

transition有四個(gè)屬性值：

transition-property:執(zhí)行過(guò)渡的屬性。

transition-duration:指定完成過(guò)渡需要的時(shí)間。

transition-timing-function,在延續(xù)時(shí)間段，過(guò)渡變換的速率變化，簡(jiǎn)單理解就是指定過(guò)渡函數(shù)。

transition-delay:過(guò)渡延遲時(shí)間。

1、transition-property

transition-property用來(lái)指定哪個(gè)屬性使用過(guò)渡動(dòng)畫(huà)效果。

語(yǔ)法：

復(fù)制代碼代碼如下:

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*

none:所有屬性都不應(yīng)用過(guò)渡效果。

all：默認(rèn)值。當(dāng)值為all時(shí)，元素產(chǎn)生任何屬性值變化時(shí)都將執(zhí)行transition效果。

ident：元素屬性名。通過(guò)ident指定具體哪些屬性。如果指定的多個(gè)屬性中有某個(gè)屬性不能應(yīng)用過(guò)渡效果，其他屬性還是生效的。

過(guò)渡屬性只有具備一個(gè)中點(diǎn)值的屬性（需要產(chǎn)生動(dòng)畫(huà)的屬性）才能具備過(guò)渡效果。在w3c中列出了所有可以實(shí)現(xiàn)transition效果的css屬性值以及值的類型

Property Name  
Typebackground-color 
as colorbackground-position 
as repeatable list of simple list of length, percentage, or calcborder-bottom-color 
as colorborder-bottom-width 
as lengthborder-left-color 
as colorborder-left-width 
as lengthborder-right-color 
as colorborder-right-width 
as lengthborder-spacing 
as simple list of lengthborder-top-color 
as colorborder-top-width 
as lengthbottom 
as length, percentage, or calcclip 
as rectanglecolor 
as colorfont-size 
as lengthfont-weight 
as font weightheight  
as length, percentage, or calcleft 
as length, percentage, or calcletter-spacing 
as lengthline-height  
as either number or lengthmargin-bottom 
as lengthmargin-left 
as lengthmargin-right 
as lengthmargin-top  
as lengthmax-height  
as length, percentage, or calcmax-width 
as length, percentage, or calcmin-height 
as length, percentage, or calcmin-width 
as length, percentage, or calcopacity 
as numberoutline-color 
as coloroutline-width 
as lengthpadding-bottom 
as lengthpadding-left 
as lengthpadding-right 
as lengthpadding-top 
as lengthright  
as length, percentage, or calctext-indent 
as length, percentage, or calctext-shadow 
as shadow listtop  
as length, percentage, or calcvertical-align  
as lengthvisibility  
as visibilitywidth 
as length, percentage, or calcword-spacing 
as lengthz-index 
as integer

Note：并不是什么屬性改變都會(huì)觸發(fā)transiton動(dòng)畫(huà)效果，比如頁(yè)面的自適應(yīng)寬度，當(dāng)瀏覽器改變寬度時(shí)，并不會(huì)觸發(fā)transition的效果。但上述表格所示的屬性類型改變都會(huì)觸發(fā)一個(gè)transition動(dòng)作效果。

舉例：可以同時(shí)給幾個(gè)屬性設(shè)置動(dòng)畫(huà)效果，比如給height和line-height同時(shí)設(shè)置動(dòng)畫(huà)效果，實(shí)現(xiàn)div變高文字仍然垂直居中。

<!DOCTYPE html><html><head> 
<meta charset="utf-8"> 
<title>變形與動(dòng)畫(huà)</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用來(lái)設(shè)置從舊屬性過(guò)渡到新屬性需要的時(shí)間，即持續(xù)時(shí)間。

3、transition-timing-function

語(yǔ)法：

復(fù)制代碼代碼如下:

<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屬性指的是過(guò)渡的“緩動(dòng)函數(shù)”。通過(guò)這個(gè)函數(shù)會(huì)建立一條加速度曲線，因此在整個(gè)transition變化過(guò)程中，變化速度可以不斷改變。主要包括以下幾種函數(shù)。

ease:默認(rèn)值，元素樣式從初始狀態(tài)過(guò)渡到終止?fàn)顟B(tài)速度由快到慢，逐漸變慢。linear：意思是線性過(guò)渡，即過(guò)渡過(guò)程恒速。ease-in:速度越來(lái)越快，呈現(xiàn)加速狀態(tài)，通常稱為“漸顯效果”。ease-out:速度越來(lái)越慢，呈現(xiàn)減速狀態(tài)，通常稱為“漸隱效果”。ease-in-out速度先加速后減速，稱為“漸顯漸隱效果”。

舉例：鼠標(biāo)經(jīng)過(guò)問(wèn)號(hào)，幫助信息漸顯漸隱。

<!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 >幫助信息</div> 
</div></body></html>

4、transition-delay

transition-delay設(shè)置改變屬性值后多長(zhǎng)時(shí)間開(kāi)始執(zhí)行動(dòng)畫(huà)。

5、屬性簡(jiǎn)寫(xiě)

在改變多個(gè)css屬性的transition效果時(shí)，把幾個(gè)transition聲明用逗號(hào)隔開(kāi)，然后每個(gè)屬性就都有各自的過(guò)渡時(shí)間和效果。

Note：第一個(gè)時(shí)間是時(shí)長(zhǎng)，第二個(gè)是延時(shí)。

復(fù)制代碼代碼如下:

a{ 

transition: background 0.8s ease-in 0.3,

color 0.6s ease-out 0.3;}

三、貝塞爾曲線和transition

transition的數(shù)學(xué)模型就是貝塞爾曲線，下面介紹。

曲線其實(shí)就是兩點(diǎn)之間插值的效果，貝塞爾曲線是一種插值算法，比線性插值復(fù)雜一點(diǎn)。

貝塞爾曲線：起始點(diǎn)，終止點(diǎn)（也稱錨點(diǎn)），控制點(diǎn)。通過(guò)調(diào)整控制點(diǎn)，貝塞爾曲線的形狀發(fā)生變化。

k階貝塞爾插值算法需要k+1個(gè)控制點(diǎn)。

一階貝塞爾曲線（線段）：意思就是從P0到P1的連續(xù)點(diǎn)，用來(lái)描述一段線段。一次貝塞爾插值就是線性插值。

二階貝塞爾曲線（拋物線）：P0-P1是曲線在P0處的切線。

三階貝塞爾曲線：

transition用到的就是三階貝塞爾插值算法,如下圖。

時(shí)間在0,1區(qū)間，待變換屬性也認(rèn)為是0,1區(qū)間。P0和P3的坐標(biāo)一直是（0,0）和（1,1）。transition-timing-function屬性用來(lái)確定P1和P2的坐標(biāo)。

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]

四、其他相關(guān)資料

canvas畫(huà)貝塞爾曲線

<!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();
//pointsfor(i=0;i<points.length;i++){drawPoint(points[i][0],points[i][1],"blue",4);}//bezierfor (i = 0; i < 1; i += 0.001)
{drawPoint.apply(this, bezier(points,i));}//lineif(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>