过渡——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属性名称列表，列表以逗号分隔，例如
|
1 2 3 4 5 6 7 8 9 10 11 |
.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，意味着没有效果）
有了这个属性，上面的案例效果就可以展现出来了。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.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 慢速开始，中间匀速，慢速结束
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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，即立即开始过渡效果。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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 设定的属性值。
三、过渡的简写
|
1 |
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; |
按照上面的顺序，列出属性值即可，属性值中间用空格分开。
所以我们的最后一个案例也可以写成：
|
1 2 3 4 5 6 7 8 9 10 11 |
.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，即：
|
1 2 3 4 5 6 7 8 9 10 11 |
.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 。
