W3C標準中對css3的transition這是樣描述的：“css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在按一下滑鼠、獲得焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。”
transition屬性的值包括以下四個：
•transition-property： 指定對HTML元素的哪個css屬性進行過渡漸層處理，這個屬性可以是color、width、height等各種標準的css屬性。
•transition-duration：指定屬性過渡的期間
•transition-timing-function：指定漸層的速度：
1、ease：（逐漸層慢）預設值，ease函數等同於貝茲路徑(0.25, 0.1, 0.25, 1.0)；
2、linear：（勻速），linear 函數等同於貝茲路徑(0.0, 0.0, 1.0, 1.0)；
3、ease-in：(加速)，ease-in 函數等同於貝茲路徑(0.42, 0, 1.0, 1.0)；
4、ease-out：（減速），ease-out 函數等同於貝茲路徑(0, 0, 0.58, 1.0)；
5、ease-in-out：（加速然後減速），ease-in-out 函數等同於貝茲路徑(0.42, 0, 0.58, 1.0)；
6、cubic-bezier：（該值允許你去自訂一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。所有值需在[0, 1]地區內，否則無效。
•transition-delay：指定延遲時間，也就是經過多長時間才開始執行過渡過程。
瀏覽器安全色性
Internet Explorer 9 以及更早的版本，不支援 transition 屬性。
Internet Explorer 10, Firefox, Opera 和 Chrome支援transition 屬性。Chrome 25 以及更早的版本以及Safari 需要首碼 -webkit-。
下面還是以執行個體來說明transition的用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>transition示範1</title> <style type="text/css"> .animated_p { margin: 100px auto; width:100px; height:60px; background:#92B901; /*簡寫屬性*/ -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */ /*每個屬性分開寫*/ transition-property:width,height,transform,background,opacity; transition-duration:1s,1s,1s,1s,1s,1s; -webkit-border-radius:5px; border-radius:5px; opacity:0.4; } .animated_p:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); opacity:1; background:#1ec7e6; width:200px; height:120px; } </style></head><body><p class="animated_p"></p></body></html>
上述代碼當滑鼠移到p上時，CSS屬性：width,height,transform,background,opacity都發生漸層過渡效果。最終css樣式變成.animated_p裡定義的樣式，過渡過程大致如下：
再給一個網上的ECS Operations and Maintenance System奔月的樣本，要求：當滑鼠移到圖片上時，ECS Operations and Maintenance System出現，移開時ECS Operations and Maintenance System消失
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>transition示範2</title> <style type="text/css"> body{ color: #fff; background:#000; } .change{ display:block; width:400px; height:400px; background:url(http://p3.qhimg.com/t0134c65e59012a1257.png) no-repeat center; background-size:cover; border:1em solid rgba(255,255,255,.8); margin:50px auto; } .change img{ display:block; width:300px; height:284px; opacity:0; -webkit-transform:translate(-100px,-100px); transform:translate(-100px,-100px); -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out; transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out; } .change:hover img{ -webkit-transform:translate(0px,0px); transform:translate(0px,0px); opacity:1; } </style></head><body> <a href="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=tab_www" class="change " target="_blank"> <img src="http://p4.qhimg.com/t0160e6a92121691e22.png" alt="" /> </a></body></html>
為了使ECS Operations and Maintenance System有飄入飄出的效果，設定了transform屬性，配合opacity屬性，加入過渡效果就能達到效果：
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
