How to make an HTML/CSS/JS color changing background (like Kahoot.it has)

Question

How do I make a color changing/fading background using html and css and possibly javascript similar to waht https://kahoot.it has?

Correspond

Have you tried something ? at least inspect the elements .... you will find is pretty easy ... (Keyframe animation) – Mercurous

Answer 1

You should learn to inspect and obtain

@keyframes bgcolor {
    0% {
        background-color: #45a3e5
    }

    30% {
        background-color: #66bf39
    }

    60% {
        background-color: #eb670f
    }

    90% {
        background-color: #f35
    }

    100% {
        background-color: #864cbf
    }
}

body {
    -webkit-animation: bgcolor 20s infinite;
    animation: bgcolor 10s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

Overmatter

Thanks, I tried inspect element but couldn't figure out which file is was in. – Correspond

@Correspond note that this solution alternates the color order, which you may be fine with. For example, if the color order is red, yellow, blue the colors would be run in this sequence: red, yellow, blue, yellow, red. Where the default would do red, yellow, blue, red, yellow, blue. – Deration

Answer 2

body {
  animation: 10000ms ease-in-out infinite color-change;
}

@keyframes color-change {
  0% {
    background-color: teal;
  }
  20% {
    background-color: gold;
  }
  40% {
    background-color: indianred;
  }
  60% {
    background-color: violet;
  }
  80% {
    background-color: green;
  }
  100% {
    background-color: teal;
  }
}

Deration

Answer 3

You really didn't show us anything in terms of you trying. But I'm a nice guy and I know you will learn by example:

div {
  animation: colorchange 10s infinite; 
}

@keyframes colorchange {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  75%  {background-color: green;}
  100% {background-color: red;}
}

Modify as needed.

Cort

Sorry, I could get stuff that worked, but didn't look right, I forgot to post it. – Correspond

Answer 4

/* The animation code */
@keyframes example {
    0%   {background-color: red;}
    33%  {background-color: yellow;}
    66%  {background-color: blue;}
    100%   {background-color: red;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

Marikomaril

Answer 5

Bruh just do this:

@keyframes bgcolor {
    0% {
        background-color: #45a3e5
    }

    30% {
        background-color: #66bf39
    }

    60% {
        background-color: #eb670f
    }

    90% {
        background-color: #f35
    }

    100% {
        background-color: #864cbf
    }
}

body {
    -webkit-animation: bgcolor 20s infinite;
    animation: bgcolor 10s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

Rhamnaceous