How can I loop a Keyframe css color animation?

Question

I want my css animation to loop the background color every second but I don't know how to get it to loop? I just want to know if this is possible without javascript. If it's not, then thats fine.

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

score 0 · Accepted Answer · answered Oct 19 '20 at 17:40

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 */
}

How can I loop a Keyframe css color animation?

1 Answers1