1.transition-property设置过度的属性，比如：width height background-color
2.transition-duration 设置 过度的时间 比如1S500MS
3.transition-timing-function设置 过度运动的方式，常用的有：linear(匀速） ease(缓冲运动）
4.transition-delay 设置动画的延迟
5.transition :property duration timing-function delay 同时设置四个属性
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition动画</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: skyblue;
border: 2px solid darkred;
margin:50px auto 0;
transition: width 500ms linear,height 500ms linear 1s;
}
.box:hover{
width: 600px;
height: 400px;
background-color: darkred;
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
来源：https://www.cnblogs.com/zijiang-4476/p/12420977.html