实现css的动画过渡

实现 CSS 动画过渡（CSS Animation Transitions）是让元素从一种样式平滑地变化到另一种样式的过程。CSS提供了丰富的动画功能，让你无需依赖JavaScript就可以创建动态效果。以下是如何使用CSS来创建基本动画过渡的步骤：

1. **选择器**: 首先，选择要应用动画的元素，可以是一个类名、ID或元素类型。

.example-element {
  /* 你的样式 */
}

2. **添加过渡属性**: 在选择器内部，添加`transition`属性，指定你要改变的属性及其持续时间和时间函数（可选）。

.example-element {
  transition: property-name duration timing-function;
  /* 或者写成 */
  transition: all 0.5s ease;
}

- `property-name`: 如`width`, `height`, `background-color`, 等。
- `duration`: 动画的持续时间，单位通常是秒(s)。
- `timing-function`: 变化速度，如`ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`等。

3. **触发过渡**: 当目标元素的状态发生改变时（比如鼠标悬停、点击或时间流逝），动画会自动开始。

4. **关键帧动画**: 如果需要更复杂的动画，可以使用`@keyframes`规则定义动画过程中的多个关键帧。

@keyframes example-animation {
  0% { /* 初始状态 */ }
  50% { /* 中间状态 */ }
  100% { /* 结束状态 */ }
}
.example-element {
  animation: example-animation 1s;
}