Applied Visual Design: Make Motion More Natural Using a Bezier Curve

Tell us what’s happening:
Help me please

Your code so far

.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.311, 0.411, .444, 1.649);

@keyframes jump {
  50% {
    top: 10%;
<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; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36.

Challenge: Make Motion More Natural Using a Bezier Curve

Link to the challenge:

Hi Anchor,
you got typos in the second and third parameter. Copy and paste can save you a lot of headache in such cases …

1 Like

didn’t notice that lol, thanks!

1 Like