CSS动画效果如何控制时间

CSS 动画的时间控制主要通过 animation-duration 属性来实现，该属性用于指定动画完成所需的时间，其值通常以秒（s）或毫秒（ms）为单位。例如，以下代码将使元素在 2 秒内完成动画：

@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: blue;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
}

除了 animation-duration，还可以使用 animation-delay 属性来控制动画开始之前的时间间隔，使用 animation-iteration-count 属性来控制动画的播放次数，使用 animation-timing-function 属性来控制动画时间变化的加速度曲线。

例如，以下代码将使元素在等待 1 秒后开始动画，并且无限次循环播放：

@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: blue;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}