css transition过渡动画

CSS过渡动画（CSS transition）是一种在元素状态改变时，通过添加过渡效果来实现平滑动画的技术。它可以应用于元素的属性变化，比如颜色、大小、位置等，使得元素的变化更加流畅和吸引人。

CSS过渡动画的实现主要依赖于以下几个属性：
1. transition-property：指定要过渡的属性，可以是单个属性或多个属性的组合。
2. transition-duration：指定过渡的持续时间，可以使用秒（s）或毫秒（ms）作为单位。
3. transition-timing-function：指定过渡的时间曲线，控制动画的加速和减速效果，常见的值有linear（匀速）、ease（缓入缓出）、ease-in（缓入）、ease-out（缓出）等。
4. transition-delay：指定过渡效果延迟的时间。

下面是一个示例代码，展示了一个简单的CSS过渡动画效果：

/* 定义初始状态 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition-property: width; /* 过渡宽度属性 */
  transition-duration: 1s; /* 过渡持续1秒 */
  transition-timing-function: ease-in-out; /* 缓入缓出效果 */
}

/* 定义鼠标悬停时的状态 */
.box:hover {
  width: 200px; /* 宽度变为200px */
}

在上述代码中，当鼠标悬停在`.box`元素上时，宽度会从初始状态的100px过渡到200px，过渡效果持续1秒，并且使用了缓入缓出的时间曲线。