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

HTML-CSS
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

3

I had the same issue with this challenge. At last I found that typing this was wrong:
animation-timing-function: cubic-bezier (0,0,0.58,1);
while typing this was accepted:
animation-timing-function: cubic-bezier(0,0,0.58,1);

You might not be able to find any difference in the two lines but there’s a minute one. There’s an empty space between cubic-bezier and its opening parenthesis in the first line. My question is, does it really make any difference to css syntax? Well, for Chrome, this change is acceptable. I don’t know why the challenge isn’t accepting the space.

1 Like
4

I have the same issue too, it’s not accepting the space nor it’s accepting without space for some reason. any idea will be highly appreciated.