Use a Bezier Curve to Move a Graphic image

Programming HTML-CSS
1

Tell us what’s happening:

Comment: It’s apparent, from the amount of help request that this question is not clear enough for the majority of the self-taught individuals to understand.

I cannot get this problem to work and I’ve been trying to solve this problem for 2 days. I went through the help and I have not found anything that is clear. Someone, please put the answer on the whiteboard; this way I/we can see the answer and reverse engineer it. I/We will then be able to see where I/we went wrong.

Your code so far


<style>
  .balls{
    border-radius: 50%;
    position: fixed;
    width: 50px;
    height: 50px;
    margin-top: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #red {
    background: red;
    left: 27%;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }
  #blue {
    background: blue;
    left: 56%;
    animation-timing-function: ease-out;
  }
  @keyframes bounce {
    0% {
      top: 0px;
    }
    100% {
      top: 249px;
    }
  }
</style>
<div class="balls" id= "cubic-bezier(0, 0, 0.58, 1)"></div>
<div class="balls" id= "blue"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic

2

You code looks good to me. What issue or error are you seeing?
Can you try refreshing your browser and then reset the code and type the line in (sometimes cutting and pasting results in including some hidden control characters that are not understood by the challenge so try to type the function in rather than paste it)