SemanticUI SemanticUI - 20 days ago 9
CSS Question

How does a mobile-background-loop implemented?

I've tried to search online but can not find the way to implement a mobile-background-loop like ones in https://verily.com/, notice how the colors changes?

Answer

You can use CSS's @keyframes to make gradient animation. Have a look at the snippet below:

body {
  background: linear-gradient(270deg, #ffc800, #41a93e, #00b2fe, #9300fe, #fe009f);
  background-size: 1000% 1000%;

  -webkit-animation: bg-gradient-animate 44s ease infinite;
  -moz-animation: bg-gradient-animate 44s ease infinite;
  -o-animation: bg-gradient-animate 44s ease infinite;
  animation: bg-gradient-animate 44s ease infinite;
}

@-webkit-keyframes bg-gradient-animate {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes bg-gradient-animate {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes bg-gradient-animate {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes bg-gradient-animate { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

Hope this helps!