css3 輕鬆實現動畫之Transitions

標籤：style   http   io   color   ar   sp   java   資料   div   

 

在軟體開發中，web前端開發的動畫是我們不可缺少的特效，在css3以前實現動畫大多都可靠javascript來實現，其步驟相對於今天的css3來說要複雜的多。儘管有了很多很好架構。得在css3中來實現動畫要簡單的多。css3中有負責動畫的有兩個一個是transitions 一個是animations 這個兩個可以說是各有不同，今天我先給大家分享transitions 的用法。對於瀏覽器的支援就不在這裡普及了，如果你看不到動畫效果，就說明你的瀏覽器不支援css3

 

這裡看一下效果，資料移動到上面會有變化

 

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

[ transition-property ]：
檢索或設定對象中的參與過渡的屬性
[ transition-duration ]：
檢索或設定對象過渡的期間
[ transition-timing-function ]：
檢索或設定對象中過渡的動畫類型
[ transition-delay ]：
檢索或設定對象延遲過渡的

下面是源碼

 

1. <!DOCTYPE HTML>
2. <html>
3. <body>
4.  
5. <div class="a"></div>
6. <div class="a"></div>
7. <div class="a"></div><div class="a"></div><div class="a"></div>
8. <div class="a"></div><div class="a"></div><div class="a"></div><div class="a"></div><div class="a"></div>
9. <style>
10. .a{ width:300px; height:30px; background:#0C9;-webkit-transition: width 1s ease,background-color 1s ease }
11. .a:hover{background-color:#9C0; width:150px; height:30px; -webkit-transition: width 1s ease,background-color 1s ease}
12. </style>
13. </body>
14. </html>

css3 輕鬆實現動畫之Transitions