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

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