div {
    width: 400px;
    height: 400px;
    background-color: #001aff;
    border: 1px solid #000;
    margin-top: 15px;
    animation-name: animacio;
    animation-duration: 10s;
    animation-iteration-count: 1;
}

@-webkit-keyframes animacio {
    0% {
        background-color: #ff5d5d;
    }

    20% {
        background-color: #88ff88;
    }

    40% {
        background-color: #8787ff;
    }

    60% {
        background-color: #fff988;
    }

    80% {
        background-color: #88ffff;
    }

    100% {
        background-color: #ff5d5d;
    }
}

@keyframes animacio {
    0% {
        background-color: #ff5d5d;
    }

    20% {
        background-color: #88ff88;
    }

    40% {
        background-color: #8787ff;
    }

    60% {
        background-color: #fff988;
    }

    80% {
        background-color: #88ffff;
    }

    100% {
        background-color: #ff5d5d;
    }
}