CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：指定要添加效果的CSS属性；指定效果的持续时间。
一、过渡属性
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
二、实例
span{
display:block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100px;
height: 30px;
line-height: 30px;
padding-left: 2px;
background: rgba(0, 155,0, 0.25);
margin-bottom: 50px;
}
span.transition{
display:block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100px;
height: 30px;
line-height: 30px;
padding-left: 2px;
background: rgba(0, 155,0, 0.25);
transition: padding-left 0.25s, border-left 0.5s;
-webkit-transition: padding-left 0.25s, border-left 0.5s;
-moz-transition: padding-left 0.25s, border-left 0.5s;
}
span:hover{
padding-left: 5px;
border-left: 3px solid rgba(0, 155,0, 1);
}
三、相关属性。
- transition-property
transition-property属性指定CSS属性的nametransition效果（transition效果时将会启动指定的CSS属性的变化）。默认值：all 。
注意：始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。
span.width{
display:block;
width: 100px;
height: 30px;
line-height: 30px;
padding-left: 2px;
background: rgba(0, 155,0, 0.25);
margin-bottom: 20px;
transition-property: width;
transition-duration: 0.5s;
}
span.width:hover{
width: 200px;
}
span.height{
display:block;
width: 100px;
height: 30px;
line-height: 30px;
padding-left: 2px;
background: rgba(0, 155,0, 0.25);
transition-property: height;
transition-duration: 0.5s;
}
span.height:hover{
height: 100px;
}
transition-property.gif
- transition-duration
transition-duration属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值：0 。
span{
display:block;
width: 100px;
height: 30px;
line-height: 30px;
padding-left: 2px;
background: rgba(0, 155,0, 0.25);
margin-bottom: 20px;
transition-property: width;
}
span.one-s{
transition-duration: 1s;
}
span.two-s{
transition-duration: 2s;
}
span.three-s{
transition-duration: 3s;
}
span:hover{
width: 200px;
}
transition-duration.gif
- transition-timing-function
transition-timing-function属性指定切换效果的速度。它可以取一下几个值。默认值：ease 。
| 值 | 描述 |
|---|---|
| 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 之间的数值。 |
span{
display:block;
width: 100px;
height: 30px;
line-height: 30px;
padding-left: 2px;
background: rgba(0, 155,0, 0.25);
margin-bottom: 20px;
transition-property: width;
transition-duration: 3s;
}
span.linear{
transition-timing-function: linear;
}
span.ease{
transition-timing-function: ease;
}
span.ease-in{
transition-timing-function: ease-in;
}
span.ease-out{
transition-timing-function: ease-out;
}
span.ease-in-out{
transition-timing-function: ease-in-out;
}
span.cubic-bezier{
transition-timing-function: cubic-bezier(0.2,1,0.2,1);
}
span:hover{
width: 200px;
}
transition-timing-function.gif
- transition-delay
transition-delay属性指定何时将开始切换效果，值是指以秒为单位（S）或毫秒（ms）。默认值：0 。
span{
display:block;
width: 200px;
height: 30px;
line-height: 30px;
padding-left: 2px;
background: rgba(0, 155,0, 0.25);
margin-bottom: 20px;
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease;
}
span.transition-delay-1s{
transition-delay: 1s;
}
span.transition-delay-2s{
transition-delay: 2s;
}
span.transition-delay-3s{
transition-delay: 3s;
}
span:hover{
width: 400px;
}
transition-delay.gif
四、应用实例
- 简写
语法：transition: property duration timing-function delay;,duration、delay可以省略会自动配置为默认值。
span{
display:block;
width: 200px;
height: 30px;
line-height: 30px;
padding-left: 2px;
background: rgba(0, 155,0, 0.25);
margin-bottom: 20px;
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: 1s;
}
//相当于
span{
display:block;
width: 200px;
height: 30px;
line-height: 30px;
padding-left: 2px;
background: rgba(0, 155,0, 0.25);
margin-bottom: 20px;
transition: width 2s ease 1s;
}
//相当于
span{
display:block;
width: 200px;
height: 30px;
line-height: 30px;
padding-left: 2px;
background: rgba(0, 155,0, 0.25);
margin-bottom: 20px;
transition: width 2s;
}
- 多项简写
语法：transition: property duration timing-function delay , property1 duration1 timing-function1 delay1 , ...propertyx durationx timing-functionx delayx;；同上，duration、delay可以省略会自动配置为默认值。
span{
display:block;
width: 200px;
height: 30px;
line-height: 30px;
padding-left: 2px;
background: rgba(0, 155,0, 0.25);
margin-bottom: 20px;
transition: width 2s , height 2s;
}
做一个简单的人，踏实而务实。不沉溺幻想。不庸人自扰。
