过渡的属性和描述
属性描述transition简写属性，用于在一个属性中设置四个过渡属性transition-property规定应用过渡的 CSS 属性的名称transition-duration定义过渡效果花费的时间。默认是 0transition-timing-function规定过渡效果的时间曲线。默认是 “ease”transition-delay规定过渡效果何时开始。默认是 0transition-property属性指定CSS属性的nametransition效果（transition效果时将会启动指定的CSS属性的变化）
具有的值和描述:
值描述none没有属性会获得过渡效果all所有属性都将获得过渡效果property定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔示例 将鼠标悬停在一个div元素上，逐步改变表格的宽度和颜色： 代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>transition-property</title> <style> div { width:100px; height:100px; background:red; transition-property: width,background; transition-duration: 1s; -webkit-transition-property: width,background; /* Safari */ -webkit-transition-duration: 1s; /* Safari */ } div:hover { width:300px; background:blue; } </style> </head> <body> <div></div> <p>鼠标移动在块上查看动画效果.</p> </body> </html>效果
transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）
可以使用的值和描述
值描述time规定完成过渡效果需要花费的时间（以秒或毫秒计）默认值是 0，如果不做修改,意味着不会有效果。示例 花3秒切换效果 代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>transition-duration</title> <style> div { width:100px; height:100px; background:red; transition-property:width; transition-duration:3s; /* Safari */ -webkit-transition-property:width; -webkit-transition-duration:3s; } div:hover { width:300px; } </style> </head> <body> <div></div> <p>将鼠标移动到块上查看动画效果.</p> </body> </html>示例
transition-timing-function具有的值和描述
值描述linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。示例 过渡效果以同样的速度从开始到结束： 代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>transition-timing-function 属性</title> <style> div { width:100px; height:100px; background:red; transition:width 2s; transition-timing-function:linear; /* Safari */ -webkit-transition:width 2s; -webkit-transition-timing-function:linear; } div:hover { width:300px; } </style> </head> <body> <div></div> <p>将鼠标移动至块上查看过渡动画效果.</p> </body> </html>效果
指定速度曲线立方贝塞尔曲线函数：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> div { width:100px; height:50px; background:red; color:white; font-weight:bold; transition:all 2s; -webkit-transition:all 2s; /* Safari */ } #div1 {transition-timing-function: cubic-bezier(0,0,0.25,1);} #div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);} #div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);} #div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);} /* Safari */ #div1 {-webkit-transition-timing-function: cubic-bezier(0,0,0.25,1);} #div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);} #div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);} #div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);} div:hover { background:green; width:300px; } </style> </head> <body> <div id="div1" style="top:100px">linear</div> <div id="div2" style="top:150px">ease</div> <div id="div3" style="top:200px">ease-in</div> <div id="div4" style="top:250px">ease-out</div> <div id="div5" style="top:300px">ease-in-out</div> <p>将鼠标移动至块上查看过渡动画效果.</p> </body> </html>效果
示例 等待2秒前切换效果开始：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> div { width:100px; height:100px; background:red; transition-property:width; transition-duration:5s; transition-delay:2s; /* Safari */ -webkit-transition-property:width; -webkit-transition-duration:5s; -webkit-transition-delay:2s; } div:hover { width:300px; } </style> </head> <body> <div></div> <p>将鼠标移动至块上查看过渡动画效果.</p> <p><b>注意:</b> 该过渡效果开始前会停顿2s.</p> </body> </html>效果
简写属性，用于在一个属性中设置四个过渡属性
语法 :transition: property duration timing-function delay;
