transition属性可以定义某个或者某些属性的值在发生变化的时候, 不是立即变化成功, 而是逐步的有个过程的变化.

transition就是一个简化的动画效果.

一般使用:hover或者:active或者javascript代码来激活过渡效果.

transition是下面四个属性的简写属性:

• transition-property

• transition-duration

• transition-timing-function

• transition-delay

.box {
    border: 1px solid #000;
    margin: 100px auto;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
             /*过渡的属性  过渡时间  过渡函数  延迟时间*/
    transition: width 2s linear 1s;
}
.box:hover {
    width: 200px; 
}

如果想同时定义多个过渡属性，则可以使用逗号分开。

transition: width 2s linear 1s, height 3s linear 2s;

• 过渡属性和过渡周期不能省略。

• 过渡函数主要有以下几个值：

• 如果不设置默认是：ease

transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

延迟时间如果不设置默认是 0s