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; }