Help with Use a Bezier Curve to Move a Graphic challenge please

Help with Use a Bezier Curve to Move a Graphic challenge please
0.0 0

#1

Tell us what’s happening:

Good evening, I wanted someone to check my code if they could please. Here is the challenge that i’m trying to accomplish.

To see the effect of this Bezier curve in action, change the animation-timing-function of the element with id of red to a cubic-bezier function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1. This will make both elements progress through the animation similarly…

My code is below. If someone could give me a had with this I would appreciate it, thank you.

Sincerely,

Mark Scott Benson

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(x1, y1, x2, y2);
  }
  #blue {
    background: blue;
    left: 56%;
    animation-timing-function: ease-out;
  }
  @keyframes bounce {
    0% {
      top: 0px;
    }
    100% {
      top: 249px;
    }
  }
</style>
<div class="balls" id= "red"></div>
<div class="balls" id= "blue"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 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

I do not see where you changed the x1, y1, x2, y2 to 0, 0, 0.58, 1 respectively. It appears you did not modify the original code at all.