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

HTML-CSS
1

Tell us what’s happening:
Help me please

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.311, 0.411, .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; 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:

2

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
3

didn’t notice that lol, thanks!

1 Like