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