CSS3中transition功能怎么使用？

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教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。