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

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

5 Answers

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

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

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.

/* 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; } 

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