-2

I am new to programming. Please forgive me if this is a very basic question.

I am working on a small project of designing a very simple personal website using HTML and CSS. On the website, I want the background colors of the main website to fade into one another after some time (say, to transition from light blue to light green to light yellow after 15s each). Is there a way I can do this using CSS?

New contributor
new_user is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
1

body {
    background:lightblue;
    animation:changebg infinite 15s;
}

@keyframes changebg{
    0% {background:lightblue;}
    33% {background:lightgreen;}
    66% {background:lightyellow;}
    100% {background:lightblue;}
}

0

Do this instead

body{
   background: lightblue;
   animation: changebg 60s linear infinite alternate;
}

@keyframes changebg{
    0% {background:lightblue;}
    33% {background:lightgreen;}
    66% {background:lightyellow;}
    100% {background:lightblue;}
}

If this doesn't work, you can mess around with the timing.

0

You can try the following code:

body{
   background: lightblue;
   animation: changebg 60s linear infinite alternate;
}

@keyframes changebg {
    0% { background:lightblue; }
    33% { background:lightgreen; }
    66% { background:lightyellow; }
    100% { background:lightblue; }
}

Pretty much the website's background will start at light blue, and when it reaches 33% of 60s (for e.g.) it will change to light green, etc. And when it reaches 100% at 60s time, the "linear infinite alternate" will make sure it repeats.

New contributor
T3C Studios is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
-1

body {
  background: red;
  animation: changebg 5s infinite;
  //adding infinte will make your animation run in a loop
}

@keyframes changebg
/* Firefox */

{
  0% {
    background: red;
  }
  50% {
    background: blue;
  }
  100% {
    background: red;
  }
}

Just an addition to the previous answer Keep on learning.

New contributor
Abc 21 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.