I cannot figure out the answer to this; I entered the coordinates provided but the shapes still move at different paces; what am i doing wrong?

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

  **Your code so far**

  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;
<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/95.0.4638.69 Safari/537.36

Challenge: Use a Bezier Curve to Move a Graphic

Link to the challenge:

You have space between ‘cubic-bezier’ and the coordinates.
It should be cubic-bezier(0,0,0.58,1) instead of cubic-bezier (0,0,0.58,1)

Adhering to proper syntax in HTML and CSS is crucial and makes all the difference and can make you scratch your head for a long time if you make a tiny typo or mistake in the markup or styles. Hope this resolves the problem.

Keep grinding!

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