css3動畫（transition）屬性探討，css3transition

css3動畫（transition）屬性探討，css3transition

在webapp引用開發中經常會用到css3動畫效果，下面我們就一起探討一下這個屬性的使用。 

在哪裡定義動畫效果？ 
css3動畫一般通過滑鼠事件或者說狀態定義動畫，通常我們可以用CSS中偽類和js中的滑鼠事件來定義。js的事件也可以，比如click，focus，mousemove,mouseover,mouseout等等 

transition的基本文法： 
css3動畫通過transition屬性和其他css屬性（顏色，寬高，變形，位置等等）配合來實現。 
transition的文法： 

Java代碼  

1. transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]  

當然這是簡寫，我們也可以完整的寫： 

Java代碼  

1. transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*；  
2. transition-duration ： <time> [, <time>]*  
3. transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*  
4. transition-delay ： <time> [, <time>]*  

1.要變化的屬性 
transition-property:要變化的屬性，比如元素變寬則是width，文字顏色要變色這是color；W3C給出了一個可變換屬性的列表： 

CSS屬性 改變的對象 
background-color 色彩 
background-image 只是漸層 
background-position 百分比，長度 
border-bottom-color 色彩 
border-bottom-width 長度 
border-color 色彩 
border-left-color 色彩 
border-left-width 長度 
border-right-color 色彩 
border-right-width 長度 
border-spacing 長度 
border-top-color 色彩 
border-top-width 長度 
border-width 長度 
bottom 百分比，長度 
color 色彩 
crop 百分比 
font-size 百分比，長度 
font-weight 數字 
grid-* 數量 
height 百分比，長度 
left 百分比，長度 
letter-spacing 長度 
line-height 百分比，長度，數字 
margin-bottom 長度 
margin-left 長度 
margin-right 長度 
margin-top 長度 
max-height 百分比，長度 
max-width 百分比，長度 
min-height 百分比，長度 
min-width 百分比，長度 
opacity 數字 
outline-color 色彩 
outline-offset 整數 
outline-width 長度 
padding-bottom 長度 
padding-left 長度 
padding-right 長度 
padding-top 長度 
right 百分比，長度 
text-indent 百分比，長度 
text-shadow 陰影 
top 百分比，長度 
vertical-align 百分比，長度，關鍵詞 
visibility 可見度 
width 百分比，長度 
word-spacing 百分比，長度 
z-index 正整數 
zoom 數字 
該取值還有個強大的“all”取值，表示上表所有屬性； 
除了以上屬性外，當然還有css3中大放異彩的css3變形，比如放大縮小，旋轉斜切，漸層等等。 

2.動畫時間 
transition-duration ：動畫執行的時間，以秒為單位，比如0.1秒可以寫成”0.1s”或者”.1s”，注意後面有個“s”單位。 

3.動畫執行的計算方式 
transition-timing-function ：動畫執行的計算方式，這裡時間函數是令人崩潰的貝茲路徑，幸好css3提過了幾個取值： 
ease：逐漸慢下來，函數等同於貝茲路徑(0.25, 0.1, 0.25, 1.0). 
linear：線性過度,函數等同於貝茲路徑(0.0, 0.0, 1.0, 1.0). 
ease-in：由慢到快,函數等同於貝茲路徑(0.42, 0, 1.0, 1.0). 
ease-out：由快到慢, 函數等同於貝茲路徑(0, 0, 0.58, 1.0). 
ease-in-out：由慢到快在到慢, 函數等同於貝茲路徑(0.42, 0, 0.58, 1.0) 
cubic-bezier：特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。所有值需在[0, 1]地區內，否則無效。 

4.動畫延遲 
transition-delay：在動作和變換開始之間等待多久，通常用秒來表示(比如, .1s)。如果你不想延遲，該值可省略。 
講了這麼多 我們看一個簡單例子： 

Java代碼  

1. <ul class="test">  
2.     <li>背景色過渡</li>  
3.     <li>背景色過渡</li>  
4.     <li>背景色過渡</li>  
5.     <li>背景色過渡</li>  
6.     <li>背景色過渡</li>  
7. </ul>   
8.   
9. <style>   
10. .test{}  
11. .test li{background-color:#eee;   
12. -moz-transition:background-color .5s ease-in;  
13. -webkit-transition:background-color .5s ease-in;  
14. -o-transition:background-color .5s ease-in;  
15. -ms-transition:background-color .5s ease-in;  
16. transition:background-color .5s ease-in;}  
17.   
18. .test li:nth-child(1):hover{background-color:#bbb;}  //滑鼠滑過背景從#eee變#bbb  
19. .test li:nth-child(2):hover{background-color:#999;}  //滑鼠滑過背景從#eee變#999  
20. .test li:nth-child(3):hover{background-color:#630;}  //滑鼠滑過背景從#eee變#630  
21. .test li:nth-child(4):hover{background-color:#090;}  //滑鼠滑過背景從#eee變#090  
22. .test li:nth-child(5):hover{background-color:#f00;}  //滑鼠滑過背景從#eee變#f00  
23. </style>     

怎用CSS3做過渡效果(transition)與動畫(animation)麻煩告訴我

div.trans { width:100px; height:100px; background:gray; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div.trans:hover { width:300px; } div.ani { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -moz-animation:mymove 5s infinite; /*Firefox*/ -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { from {left:0px;} to {left:200px;} } @-moz-keyframes mymove /*Firefox*/ { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} }剛開始W3C CSS Workgroup拒絕將CSS3 transition與animation加入官方標準，一些成員認為過渡效果和動畫並非樣式屬性，而且已經可以用指令碼實現。文法：transition: property duration timing-function delay;說明：ValueDescriptiontransition-property指定要改變CSS屬性的名稱transition-duration指定過渡效果要花多少時間(s/ms)transition-timing-function指定過渡效果的速度transition-delay定義過渡效果的延遲時間.執行個體：<style type="text/css"> div { width:100px; height:100px; background:red; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } </style> <div></div> 2. AnimationCSS動畫(Animations)簡單說就是在一段固定的動畫時間內暗中在某一頻率內改變其CSS某個或某些值,從而達到視覺上的轉換動畫效果。下面看下一個簡單的執行個體：<style type="text/css&quot......餘下全文>>
 
寫css樣式的時 用一張圖片定位 給某個元素添加了transition屬性

transition屬性是給其他屬性的變化添加平滑動畫效果 你的代碼中有許多類似如下兩句的樣式
.jxyd a{ top:67px; left: 100px;background: url(images/login/jsyd.jpg) no-repeat left top;}
.jxyd a:hover{background: url(images/login/jsyd.jpg) no-repeat -176px top;}

hover的時候，發生變化的屬性值是left→-176px，自然就產生了滾動效果

我不知道你指的漸隱具體是要實現什麼樣的效果，所以沒法提具體的修改方案