Use a Bezier Curve to Move a Graphic

Tell us what’s happening:

can some help me tell me whtas wrong with my code

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"></div>
<div class="balls" id= "blue"></div>

Your browser information:

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

On the last two lines:

<div class="balls" id= "cubic-bezier"></div>
<div class="balls" id= "blue"></div>

You were supposed to apply the cubic bezier function to the div with the id or “red”, not change the id. If you change the id back to “red”, it works.

i did yet it didnt work out have been on this for two days now

When I go to your code, and do as I suggested and change this line:

<div class="balls" id= "cubic-bezier"></div>

back to

<div class="balls" id= "red"></div>

Then it passes. If you do exactly that and it doesn’t pass, then it may be a browser issue - sometimes they just glitch. Reboot, try a different browser, clear the browser cache, etc.

1 Like