css 过渡动画入门

CSS 过渡动画允许您在指定的时间内平滑地更改 CSS 属性值。
要创建过渡动画，您需要指定要动画化的 CSS 属性，动画持续时间以及你要使用的任何缓动或定时函数。
你还可以指定动画开始前的延迟。

以下是更改元素背景颜色的简单过渡的示例：

button {
  background-color: lightblue;
  transition: background-color 0.5s ease-in-out;
}

button:hover {
  background-color: lightgreen;
}

在此示例中，当鼠标悬停在按钮元素上时，背景颜色将以 0.5 秒的时间，使用 ease-in-out 缓动函数从 lightblue 平滑变换为 lightgreen。

你可以动画化许多其他 CSS 属性，包括宽度、高度、不透明度、变换等。
你也可以使用 transition-timing-function 属性控制动画的方向。

对于更复杂的动画，你可以使用 CSS 关键帧定义动画，并使用 JavaScript 控制动画。