Cubic-bezier challenges

Tell us what’s happening:

Your code so far


<style>
.balls {
  border-radius: 50%;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 60%;
  animation-name: jump;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
#red {
  background: red;
  left: 25%;
  animation-timing-function: linear;
}
#blue {
  background: blue;
  left: 50%;
  animation-timing-function: ease-out;
}
#green {
  background: green;
  left: 75%;
  animation-timing-function: cubic-bezier(0.331, 0.441, 0.444, 1.649);
}

@keyframes jump {
  50% {
    top: 10%;
  }
}
</style>
<div class="balls" id="red"></div>
<div class="balls" id="blue"></div>
<div class="balls" id="green"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 7.0; Infinix X571) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.127 Mobile Safari/537.36.

Challenge: Make Motion More Natural Using a Bezier Curve

Link to the challenge:

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

The more information you give us, the more likely we are to be able to help.

1 Like

It’s just a typo in the numeric values.

Can anyone helps out, I was thinking its right but don’t just know where d error is, kindly help out

What error are you seeing? What else have you tried? Have you been able to narrow it down to a particular part of the code?

I’ve been stock here for too too long hours, just help solve d task as a whole. The error is just too long for me to single out.

animation-timing-function(0.311, 0.441, 0.444, 1.649);

This I expect it to be at the green elements. Just help solve it please.

Babatunde Raji
MD Basraj Global Investment Nig Ltd

Dude you’ve spent hours finding one typo?

These are the values provided by the challenge:
cubic-bezier(0.311, 0.441, 0.444, 1.649);

This is your code from above:
cubic-bezier(0.331, 0.441, 0.444, 1.649);

I’m sure you’ll figure it out, you can do it :love_you_gesture:

I’ve gotten it, thanks for your response. Actually the zero shouldn’t be typed bf the point.

In fact you can type as many zeroes as you like before the point, but that doesn’t really matter

I initially made a mistake by typing 0.331 instead of 0.311, and after then it was still giving same error, till I decided not to type d zero bf it now went tru. Well thanks for your guide. Just keep hanging there because lots ahead. Lol