/*
replace html, body with what background area you want to animate
*/
html, body {
    /* replace colors to what you would like. */
    background: -webkit-linear-gradient(45deg, #acd6f5 10%, #d7e1f4 90%);
    background: linear-gradient(45deg, #acd6f5 10%, #d7e1f4 90%);
    overflow: auto;
    background-size: 200% 100% !important;
    -webkit-animation: move 10s ease infinite;
    animation: move 10s ease infinite;
    }
/* this is where the magic happens */
@-webkit-keyframes move {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 100% 0;
    }
    100% {
        background-position: 0 0;
    }
    
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}