如何循环关键帧css颜色动画

Question

我想让我的css动画每秒循环一次背景色，但我不知道如何循环？我只是想知道如果没有javascript，这是否可行。如果不是，那也没关系。

body {
background-repeat: no-repeat;
background-size: cover;
font-family: 'Roboto', sans-serif !important;
position: relative;
animation-name: color;
animation-duration: 6s;
}
@keyframes color {
0% {background-color: white;}
20% {background-color: green;}
40% {background-color: aqua;}
60% {background-color: red;}
80% {background-color: yellow;}
100% {background-color: purple;}
}

Answer 1

body {
background-repeat: no-repeat;
background-size: cover;
font-family: 'Roboto', sans-serif !important;
position: relative;
animation-name: color;
animation-duration: 6s;
animation-iteration-count:infinite; /* add this line */
}