Background Color Shifting

Post date: Sep 21, 2017 11:14:17 AM

CSS

body {

 /* Background color shifting */

 background: linear-gradient(270deg, #00d3f5, #7354ee);

 background-size: 400% 400%;

 -webkit-animation: AnimationName 30s ease infinite;

 -moz-animation: AnimationName 30s ease infinite;

 -o-animation: AnimationName 30s ease infinite;

 animation: AnimationName 30s ease infinite;

}

/* Background color shifting */

@-webkit-keyframes AnimationName {

 0%{background-position:0% 50%}

 50%{background-position:100% 50%}

 100%{background-position:0% 50%}

}

@-moz-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%}

}

@keyframes AnimationName {

 0%{background-position:0% 50%}

 50%{background-position:100% 50%}

 100%{background-position:0% 50%}

}