4s的动画，0到1秒时background-color红色，1到3秒时background-color蓝色，3到4秒时background-color红色 要求每次颜色变换的时候突然变色而不是渐变 css怎么写

要实现这样一个4秒的动画，其中背景颜色在0到1秒时为红色，1到3秒时为蓝色，然后在3到4秒时又变回红色，并且每次颜色变换都是瞬间完成而不是渐变，可以通过CSS3的关键帧动画（@keyframes）来完成。

以下是一个示例代码，展示如何使用CSS实现这样的动画效果：

@keyframes colorChange {
    0%, 100% {
        background-color: red; /* 初始和结束时背景颜色为红色 */
    }
    33.33% {
        background-color: blue; /* 1秒到3秒之间背景颜色为蓝色 */
    }
}

.element {
    animation: colorChange 4s infinite; /* 应用动画，总时长4秒，无限循环 */
}

在这个例子中，`.element` 是你想要应用动画的元素的类名。`animation` 属性定义了使用的关键帧动画（`colorChange`），动画总时长为4秒，并设置为无限循环。关键帧（`@keyframes`）定义了在动画开始（0%）、中间（33.33%）和结束（100%）时的背景颜色。

需要注意的是，由于CSS动画不支持定义多个关键帧在同一个百分比，所以在实际应用中，你可能需要调整关键帧的百分比或时长，以便更精确地匹配你需要的动画效果。