如何在 CSS 中定义动画的持续时间？

在 CSS 中，我们可以通过定义动画的持续时间来控制动画的速度和流程。下面将介绍如何在 CSS 中定义动画的持续时间。

1. 使用关键帧动画

关键帧动画是一种定义动画的方式。在关键帧动画中，我们需要定义关键帧，然后在这些关键帧中定义不同的属性值，浏览器会自动计算出这些属性值之间的动画效果。关键帧动画的持续时间可以通过 animation-duration 属性来定义。

/* 定义一个从左往右移动的动画，持续时间为 2 秒 */
@keyframes move {
  from { left: 0; }
  to { left: 100px; }
}
div {
  animation-name: move;
  animation-duration: 2s;
}

在上面的代码中，我们定义了一个从左往右移动的动画，使用 @keyframes 来定义动画关键帧。然后在 animation-name 中指定动画的名称，使用 animation-duration 来定义动画的持续时间。

2. 使用过渡动画

过渡动画是通过定义过渡效果来实现动画的。过渡效果可以是元素属性值的改变，比如颜色、大小、位置等。过渡动画的持续时间可以通过 transition-duration 属性来定义。

/* 定义一个鼠标悬停时背景色渐变效果，持续时间为 1 秒 */
div {
  background-color: #ff0000;
  transition-property: background-color;
  transition-duration: 1s;
}
div:hover {
  background-color: #00ff00;
}

在上面的代码中，我们定义了一个鼠标悬停时背景色渐变效果。当鼠标悬停在 div 元素上时，背景色会从红色渐变到绿色。使用 transition-property 属性来定义需要过渡的属性，使用 transition-duration 属性来定义动画的持续时间。

总结

以上就是如何在 CSS 中定义动画的持续时间。我们可以使用关键帧动画或过渡动画来实现动画效果，并且均支持定义动画的持续时间。如果您还有其他问题或建议，请随时提出。