freeCodeCamp Challenge Guide: Make Motion More Natural Using a Bezier Curve

Make Motion More Natural Using a Bezier Curve

Hint:

Find the css selector for #green, and change the numbers for the cubic-bezier.

Solution:

Solution (click to show/hide)
<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.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>
7 Likes