过渡动画transition

过渡动画（transition）是指在元素状态发生改变时，通过添加动画效果平滑地过渡到新状态的一种技术。它可以用于改变元素的位置、大小、颜色、透明度等属性，使页面的视觉效果更加流畅和吸引人。

在CSS中，可以使用transition属性来定义过渡动画。以下是一个例子：

/* 定义元素的初始状态 */
.box {
  width: 200px;
  height: 200px;
  background-color: red;
  transition: width 1s, height 1s, background-color 1s; /* 定义过渡属性和过渡时间 */
}

/* 定义元素的新状态 */
.box:hover {
  width: 300px;
  height: 300px;
  background-color: blue;
}

在上述例子中，`.box` 元素被定义为一个正方形，初始状态下宽度为200px，高度为200px，背景颜色为红色。当鼠标悬停在元素上时，`.box:hover` 规则生效，元素的宽度变为300px，高度为300px，背景颜色变为蓝色。通过添加了transition属性，并指定了过渡属性和过渡时间，当宽度、高度和背景颜色发生变化时，会以1秒的时间平滑过渡到新的状态。

除了简单的属性变化，还可以使用过渡动画实现更复杂的效果，比如淡入淡出、旋转、缩放等。通过合理运用过渡动画，可以为网页增添更多的交互性和视觉效果。