Transition的属性
要实现一个CSS Transition效果，通常需要设置以下几个属性：
transition-property: 指定应用过渡效果的CSS属性名称。
transition-duration: 定义过渡效果完成所需的时间。
transition-timing-function: 描述过渡效果的速度曲线，如线性、加速、减速等。
transition-delay: 定义过渡效果开始前的延迟时间。
.box {
width: 200px;
height: 200px;
background-color: red;
/* 添加过渡效果 */
transition: background-color 0.5s ease;
}
1 transition-property
transition-property属性用于指定应用过渡效果的CSS属性。可以指定单个属性，也可以使用逗号分隔的列表指定多个属性。
示例：
对宽度和高度应用过渡效果： transition-property: width, height;
对所有可动画属性应用过渡效果： transition-property: all;
2 transition-duration
transition-duration属性用于定义过渡效果完成所需的时间。时间单位可以是秒（s）或毫秒（ms）。
示例：
过渡效果持续0.5秒
transition-duration: 0.5s;
过渡效果持续500毫秒
transition-duration: 500ms;
3 transition-timing-function
transition-timing-function属性描述了过渡效果的速度曲线。
常用的值包括linear（线性）、ease（慢到快再到慢）、ease-in（慢到快）、ease-out（快到慢）
和ease-in-out（慢到快再到慢，但比ease更平缓）。
/* 使用线性速度曲线 */ transition-timing-function: linear; /* 使用自定义的贝塞尔曲线 */ transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
transition-delay属性用于定义过渡效果开始前的延迟时间。
/* 过渡效果开始前延迟1秒 */ transition-delay: 1s; /* 过渡效果开始前延迟200毫秒 */ transition-delay: 200ms;
