过渡——CSS3动态效果 过渡属性

过渡——CSS3动态效果 过渡属性

一、什么是过渡：

• 通过 css3 可以在不使用 flash 动画或 javascript 的情况下，为元素从一种样式变换为另一种样式时添加过渡效果。
• css3 过渡就是元素从一种样式逐渐改变为另一种的效果，需要确定两点：
  1. 需要添加效果的 css 属性
  2. 效果的时长

 

二、过渡属性：

过渡有四个属性：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 。