过渡——CSS3动态效果 过渡属性
一、什么是过渡：
通过 css3 可以在不使用 flash 动画或 javascript 的情况下，为元素从一种样式变换为另一种样式时添加过渡效果。css3 过渡就是元素从一种样式逐渐改变为另一种的效果，需要确定两点： 需要添加效果的 css 属性效果的时长二、过渡属性：
过渡有四个属性：transition-property 、transition-duration 、transition-timing-function 、transition-delay
1、transition-property
定义：此属性可以设置添加过渡的 css 样式，可以单独设置只有某一个 css 属性具有过渡效果（property），也可以设置所有属性都有过渡效果（all）
属性：
transition-property 有三个属性值：none、all、property
注意：在上面的案例中，虽然宽和高会获得过渡效果，但是你并不能看不出来，因为没有设置过渡时长。我们在上面提到，设置过渡，属性名和时长是必须要设置的，下面我们就来看过度时长的属性如何设置。property 定义应用过渡效果的css属性名称列表，列表以逗号分隔，例如
.box {width: 200px;height: 200px;background-color: blue;transition-property: width,height;}.box:hover {width: 300px;height: 300px;background-color: red;}
此时宽和高会获得过渡效果，但是背景颜色不会获得过渡效果。因为我们的transition-property 里面没有添加属性值 background-color 。
property 表示可以把属性名一个一个列出来，并不是直接写 property。all 所有属性都会获得过渡效果none 没有属性会获得过渡效果
2、transition-duration
定义;此属性表示规定完成过渡效果需要多少秒或毫秒
属性值：
transition-duration 只有一个属性值：time。表示完成过渡效果需要花费的时间（以秒s或毫秒ms计算，默认为0，意味着没有效果）
有了这个属性，上面的案例效果就可以展现出来了。
.box {width: 200px;height: 200px;background-color: blue;transition-property: width, height;transition-duration: 2s;}.box:hover {width: 300px;height: 300px;background-color: red;}
此时将鼠标放在我们的蓝色盒子上，他的宽高会用2s变大，但是背景颜色会瞬间变大，因为我们并没有给背景颜色添加过渡效果。
3、transition-timing-function
定义：此属性规定了过渡效果的速度，默认值为ease 。
属性值：
transition-timing-function 有五个属性值：linear、ease、ease-in、ease-out、ease-in-out
linear 匀速完成过渡ease 慢速开始、中间变快、慢速结束ease-in 慢速开始，后面匀速ease-out 慢速结束，前面匀速ease-in-out 慢速开始，中间匀速，慢速结束
.box {width: 200px;height: 200px;background-color: blue;transition-property: width, height;transition-duration: 2s;transition-timing-function: linear;}.box:hover {width: 300px;height: 300px;background-color: red;}
在 transition-duration 的案例中，我们可以感受到那时的过渡变换过程是慢速开始、中间匀速、再慢速结束，因为那时我们没有设置transition-timing-function 的属性值，他默认为 ease 。此时我们将他设置为 linear ，我们可以感受到，此时他是全程匀速的。其他的属性值，大家也自己尝试一下，感受感受他们的不同吧。
4、transition-delay
定义：此属性定义：何时将开始过渡效果，也叫过渡延迟时间。
属性值：
与 transition-duration 一样，transition-delay 也只有一个属性值：time。规定在过渡效果开始之前需要等待的时间（以秒s或毫秒ms计算），默认为0，即立即开始过渡效果。
.box {width: 200px;height: 200px;background-color: blue;transition-property: width, height;transition-duration: 2s;transition-timing-function: linear;transition-delay: 2s;}.box:hover {width: 300px;height: 300px;background-color: red;}
此案例中，蓝色盒子会立即变成红色盒子，但是会静止2s，然后再用2s匀速变大到宽高都为300px。那静止的2s即为 transition-delay 设定的属性值。
三、过渡的简写
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
按照上面的顺序，列出属性值即可，属性值中间用空格分开。
所以我们的最后一个案例也可以写成：
.box {width: 200px;height: 200px;background-color: blue;transition: all 2s linear 2s;}.box:hover {width: 300px;height: 300px;background-color: red;}
注意：此时的 transition-property 需要设置为 all 或者只设置一个值（width\height\backgroud-color）,设置为 all 时，width、height、background-color都具有过渡效果，设置单个属性值时，其他两个属性值就不具有过渡效果，会立即变化。不可以将 transition-property 写成 width,height，即：
.box {width: 200px;height: 200px;background-color: blue;transition: width,height 2s linear 2s;}.box:hover {width: 300px;height: 300px;background-color: red;}
此时的 width 将不具有过渡效果，会立即变为 300px 。只有 height 会延迟2s ，然后花费 2s 变为 300px ，再停顿 2s 后，花费 2s 变回 200px 。
