Cubic-bezier challenges

HTML-CSS
#1

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:

#2

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
#3

It’s just a typo in the numeric values.

#4

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

#5

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?

#6

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

#7

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:

#8

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

#9

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

#10

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

#11