How to make the background color of a simple website transition smoothly with CSS?-CodePudding

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?

CodePudding user response：

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

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

CodePudding user response：

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.

CodePudding user response：

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.