css‎ > ‎

Background Color Shifting

posted Sep 21, 2017, 4:14 AM by Chris Franklin   [ updated Sep 21, 2017, 4:14 AM ]
  • #00d3f5 is your starting color
  • #7354ee is your ending color

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


Comments