Question 242176 in Html Question posted in
Some basic documentation can be found here.

Html – Color changing background animation

I am currently working on a website and I want to have an animation where the background changes color at certain points.

@keyframes background_color {
    0% {
        background: #dfdfdf;
    }

    15% {
        background: radial-gradient(rgb(143, 50, 224, 0.6), #dfdfdf );
    }

    35% {
        background: radial-gradient(rgb(143, 50, 224, 0.6), #dfdfdf );
    }

    50% {
        background: #dfdfdf;
    }

    100% {
        background: #dfdfdf;
    }
}

The percents seem kind of weird, but they match with the movement of another animation. Basically, I want the color to change 9 times where it goes from default background to color change back to the default background and then repeat 9 times with different colors.

I tried java and other things like that, but I don’t know what to really do.

Tags:

2

Answers


  1. 0

    you can do this with css yes, and I can see that you forgot to add in "animation-duration".

    try this:

    /* The animation code */
@keyframes example {
    0% {background: #dfdfdf;}
    15% {background: radial-gradient(rgb(143, 50, 224, 0.6), #dfdfdf);}
    35% {background: radial-gradient(rgb(143, 50, 224, 0.6), #dfdfdf);}
    50% {background: #dfdfdf;}
    100% {background: #dfdfdf;}
} 
/* The element to apply the animation to */
body {
    background-color: #dfdfdf;
    animation-name: example;
    animation-duration: 4s;
}

    you can read more here on how this work: https://www.w3schools.com/css/css3_animations.asp

    Login or Signup to reply.
  2. 0 
    function secondFrame() {
    setTimeout(() => {
        console.log("ok");
        document.getElementById("back").classList.remove("one");
        document.getElementById("back").classList.add("two");
    }, 16000);
}
    body {
              padding: 0;
              margin: 0;
          }

          @keyframes background_color1 {
              0% {
                  background: #dfdfdf;
              }
              15% {
                  background: red;
              }
              35% {
                  background: blue;
              }
              50% {
                  background: green;
              }
              100% {
                  background: #dfdfdf;
              }
          }

          @keyframes background_color2 {
              0% {
                  background: #141414;
              }
              15% {
                  background: red;
              }
              35% {
                  background: blue;
              }
              50% {
                  background: green;
              }
              100% {
                  background: #141414;
              }
          }

          .one {
              width: 100%;
              height: 100vh;
              animation: 5s ease-in-out 1s 3 both background_color1;
          }

          .two {
              width: 100%;
              height: 100vh;
              animation: 5s ease-in-out 1s 3 both background_color2;
          }
    <!DOCTYPE html>
<html>
    <body onload="secondFrame()">
        <div class="one" id="back"></div>
    </body>
</html>

    In CSS, you can change 3 to 9.
    And In javascript, you can change 16000 to 5 * 9 * 1000 + 1 – It’s waiting second.

    Hope your success!!!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search