transition屬性的使用方法：transition:property duration timing-function;

其中property表示對哪個屬性進行平滑過渡，duration表示多長時間完成屬性值的平滑過渡，timing-function表示通過什么方法來進行平滑過渡。

多平滑過渡示例：

 1 !DOCTYPE html 2 html lang= zh-CN 3 head 4  meta http-equiv= content-type content= text/html; charset=utf-8 5  meta http-equiv= x-ua-compatible content= IE=edge 6  meta name= viewport content= width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no 7  title 測試 /title 8 /head 9 body 10 div id= test /div 11 style 12 #test{13  width: 500px;14 height: 500px;15 background-color: yellow;16 /*css動畫*/17  transform: rotate(0);18 -webkit-transition: transform 0.5s linear, width 0.5s linear;19 -moz-transition: transform 0.5s linear, width 0.5s linear;20 -ms-transition: transform 0.5s linear, width 0.5s linear;21 -o-transition: transform 0.5s linear, width 0.5s linear;22 transition: transform 0.5s linear, width 0.5s linear;23 }24 #test:hover{25 width: 200px;26 transform: rotate(180deg);27 }28 /style 29 /body 30 /html 

使用示例：

 1 !DOCTYPE html 2 html lang= zh-CN 3 head 4  meta http-equiv= content-type content= text/html; charset=utf-8 5  meta http-equiv= x-ua-compatible content= IE=edge 6  meta name= viewport content= width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no 7  title 測試 /title 8 /head 9 body 10 div id= test /div 11 style 12 /*animation動畫*/13  @-webkit-keyframes colorChange {14 0%{15 background-color: deepskyblue;16 }  50%{18  background-color: red;19 }20  100%{21 background-color: deepskyblue;22 }23 }24  #test{25 width:500px;26 height: 500px;27  background-color: deepskyblue;28 }29 #test:hover{30 animation-name: colorChange;  animation-duration: 1s;32 animation-timing-function: linear;33 }34 /style 35 /body 36  /html 

實現動畫的方法：

以上就是CSS3中transition功能怎么使用？的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。