What is wrong here.. I am not able to understand

Tell us what’s happening:

  **Your code so far**

<style>

.balls{
  border-radius: 50%;
  background: linear-gradient(
    35deg,
    #ccffff,
    #ffcccc
  );
  position: fixed;
  width: 50px;
  height: 50px;
  margin-top: 50px;
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
#ball1 {
  left: 27%;
  animation-timing-function: cubic-bezier (0.25, 0.25, 0.75, 0.75);
}
#ball2 {
  left: 56%;
  animation-timing-function: ease-out;
}

@keyframes bounce {
  0% {
    top: 0px;
  }
  100% {
    top: 249px;
  }
}

</style>

<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36.

Challenge: Learn How Bezier Curves Work

Link to the challenge:

Try like this animation-timing-function: cubic-bezier(.25, .25, .75, .75);

1 Like

I am trying out. but it isn’t working.

What! It not working? But the the code that I suggested is correct

I think it’s a glitch… :thinking:

I even tested my code and it’s saying passed.so, it might be a glitch

ya now it’s working… thanks for taking intrest and solving my issue.

what did you do to make it work?

I have refreshed my page 2 to 3 times… and wrote the code what u have told… and it worked. :slightly_smiling_face:

Ok. And I am happy that my code works and helped you

I would check that your browser is up to date and you do not have any extensions on for freeCodeCamp. I’d also try clearing your browser cache.

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