CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：指定要添加效果的CSS属性；指定效果的持续时间。

一、过渡属性

二、实例

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);
}

三、相关属性。

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

2. 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

3. transition-timing-function
   transition-timing-function属性指定切换效果的速度。它可以取一下几个值。默认值：ease 。

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

4. 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

四、应用实例

1. 简写
   语法：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;
}

2. 多项简写
   语法：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;
}

做一个简单的人，踏实而务实。不沉溺幻想。不庸人自扰。