CSS3 过渡

过渡：执行一定操作后某属性从指定状态过渡到另一状态。1.指定要添加效果的CSS属性。 2.指定效果的持续时间。

div{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

div:hover{
    width:300px;
}

也可以同时改变多个属性

div{
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

transition的四个属性如下：

div{
    transition: 属性名 过渡时间 过渡效果的时间曲线 开始的延迟时间
    -webkit-transition:属性名 过渡时间 过渡效果的时间曲线 开始的延迟时间
}
属性名:width height background-color;
过渡时间:2s;
过渡效果的时间曲线: linear ease ease-in ease-out ease-in-out;
开始的延迟时间:2s;

 

来源：https://www.cnblogs.com/xihailong/p/11935488.html