CSS3使⽤transition属性实现过渡效果
⽬的是让css的⼀些属性（如background）的以平滑过渡的效果出现。它是⼀个合并属性，是由以下四个属性组合⽽成：transition-property：设置应⽤过渡的CSS属性，如background。
transition-duration：设置过渡效果花费的时间。默认是 0。
transition-timing-function：设置过渡效果的时间曲线。默认是 "ease"。
transition-delay：规定过渡效果何时开始。默认是 0。
transition用法搭配
⽰例：
1 2 3 4button{
transition: background 1s;
-webkit-transition: background 1s; /* Safari */ }
定义transition属性时，transition-property和transition-duration是必选，其他两个为可选。
transition-property和transition-duration
transition-property⽤来指定应⽤过渡效果的CSS属性，这些属性包括（可能不全）：
width
height
color
background (color, image, position)
transform (in the next post)
border (color, width)
position (top, bottom, left, right )
text (size, weight, shadow, word-spacing)
margin
padding
opacity
visibility
z-index
all
transition-duration属性⽤来设置指定属性的过渡效果花费时间，可以是秒（s）或者毫秒（ms）。
transition-delay和transition-timing-function
transition-delay⽤来设置过渡效果开始的时间，默认为0，可以是秒（s）或者毫秒（ms）。如果transition-delay是负数，表⽰过渡效果提前开始。
transition-timing-function⽤来设置过渡的效果，这些效果包括：
ease - 开始慢，中间快，结束慢
ease-in - 渐⼊效果，慢⼊快出
ease-out - 渐出效果，快⼊慢出.
ease-in-out - 开始慢和结束慢
cubic-bezier(n,n,n,n) - 在 cubic-bezier 函数中定义⾃⼰的值。可能的值是 0 ⾄ 1 之间的数值
⽰例：
1 2 3 4button{
transition: background 1s ease-in-out 2s;
-webkit-transition: background 1s ease-in-out 2s; /* Safari */ }
多属性
对于多个属性，各个属性的效果以逗号隔开：
1 2 3 4button{
transition: background 1s ease-in-out 2s, width 2s linear;
-webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */ }
兼容性
Internet Explorer 10、Firefox、Opera 和 Chrome ⽀持 transition 属性。
Safari ⽀持替代的 -webkit-transition 属性。
Internet Explorer 9 以及更早版本的浏览器不⽀持 transition 属性。
触发
需要注意的是，过渡效果是需要之前已经定义好了属性，过渡效果通过触发来应⽤，⽐如:hover, :focus, and :active等。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。