.anim-1 {
    width: 10vw;
    height: 10vw;
    color: var(--c-block-highlight);
    text-align: center;
    vertical-align: center;
    border: medium solid var(--c-block-highlight);
    animation: kf-1 2s steps(5, jump-none) infinite alternate;
}

@keyframes kf-1 {
    0% {
        background-color: green;
        transform: translateX(0);
    }
    20%, 40% {
        background-color: lightgreen;
        transform: translateX(100%);
    }
    60%, 80% {
        background-color: lightblue;
        transform: translateX(200%);
    }
    100% {
        background-color: blue;
        transform: translateX(300%);
    }
}