4s的动画，0到1秒时background-color红色，1到3秒时background-color蓝色，3到4秒时background-color红色 css怎么写

在CSS中，创建4秒动画，使元素在0到1秒时背景色为红色，在1到3秒时背景色为蓝色，而在3到4秒时再次变为红色，可以通过使用`@keyframes`规则来定义动画的关键帧，然后将动画应用到元素的`animation`属性上。以下是如何实现这个动画的CSS代码示例：

@keyframes background-color-animation {
    0% { background-color: red; }
    25% { background-color: red; }
    25% { background-color: blue; }
    75% { background-color: blue; }
    100% { background-color: red; }
}

.element-to-animated {
    animation: background-color-animation 4s linear;
}

在这个例子中：
- `@keyframes` 定义了一个名为 `background-color-animation` 的动画，指定了在动画的特定百分比时刻应该应用的样式。
- `animation` 属性应用了动画，`4s` 表示动画的总时长为4秒，`linear` 表示动画的速度曲线为匀速。

需要注意的是，由于`animation`属性并不直接支持在同一动画中改变同一个属性两次（在这个例子中是`background-color`），所以可以使用百分比来更精细地控制每个颜色变化的时刻。