Applied visual design at the end

hello friends can’t seem to go beyond here, however good my code is. anyone please help.


<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 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36.

Challenge: Make Motion More Natural Using a Bezier Curve

Link to the challenge:

The x1 value needs to be 0.311 and you have 0.331.

1 Like

Ooh didn’t give that attention, thanks a lot.

1 Like