Applied Visual Design - Create Movement Using CSS Animation

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

I want to make this animation continue moving how can I do that can I use “animation-fill-mode” in this code

Your code so far

<style>
  div {
    height: 40px;
    width: 70%;
    background: black;
    margin: 50px auto;
    border-radius: 5px;
    position: relative;
   
  }

  #rect {
    animation-name: rainbow;
    animation-duration: 4s;
  }

  @keyframes rainbow {
    0% {
      background-color: blue;
      top: 0px;

    }
    50% {
      background-color: green;
      top: 50px;

    }
    100% {
      background-color: yellow;
      top: 0px;

    }
  }
</style>

<div id="rect"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

Challenge: Applied Visual Design - Create Movement Using CSS Animation

Link to the challenge:

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

I was asking about animation duration my animation stopped after 4s so I wanted to make it continue moving so which property should I use? like we have animation-“timing” or “iteration” or “fill-mode” - function?

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.