body {
    animation: colorchange 20s infinite; /* animation-name followed by duration in seconds*/
    /* you could also use milliseconds (ms) or something like 2.5s */
    -webkit-animation: colorchange 20s infinite; /* Chrome and Safari */
}

#login-icon {
    /*-ms-transform: rotate(270deg);*/ /* IE 9 */
    /*-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */ 
    /*transform: rotate(270deg);*/
    -webkit-animation: spin 10s linear infinite;
    -moz-animation: spin 10s linear infinite;
    animation: spin 10s linear infinite;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes colorchange {
    0% {
        background: white;
    }
    10%{
        background: red;
    }
    20% {
        background: yellow;
    }
    30% {
        background: blue;
    }
    40% {
        background: green;
    }
    50% {
        background: black;
    }
    60%{
        background: orange;
    }
    70% {
        background: #311b92;
    }
    80% {
        background: #00bcd4;
    }
    90%{
        background:lime;
    }
    100% {
        background: white;
    }
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
    0% {
        background: white;
    }

    10% {
        background: red;
    }

    20% {
        background: yellow;
    }

    30% {
        background: blue;
    }

    40% {
        background: green;
    }

    50% {
        background: black;
    }

    60% {
        background: orange;
    }

    70% {
        background: #311b92;
    }

    80% {
        background: #00bcd4;
    }

    90% {
        background: lime;
    }

    100% {
        background: white;
    }
}