| transition-property： | 需要的过渡样式，默认为all |
| transition-duration： | 运动时间默认为0s |
| transition-delay： | 延迟时间默认为0s |
| transition-timing-function： |
A.ease：（慢速开始，然后变快，然后慢速结束） B. linear：（匀速） ease-in：(加速) C.ease-out：（减速） D.ease-in-out：（先加速后减速） E.cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）http:cubic-bezier.com F.steps（） 实现一个关键逐帧动画的功能 |
代码展示：
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
/* 线性渐变，详细属性可查我的往期文章 */
background-image:linear-gradient(to left ,blue, red);
/* 过渡样式 */
transition-property: all;
/* 运动时间 */
transition-duration: 3s;
/* 延迟时间 */
transition-delay: 1s;
/* 运动方式 匀速运动*/
transition-timing-function: ease;
}
div:hover{
width: 500px;
height: 100px;
}
</style>运行结果：
