3 bezier curves, with a time difference

Tell us what’s happening:
notice how the balls are mvoing. how do i get them to all move according to the same bezier curve :
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649)
but just with a time difference.
right now it just doesnt look right.
i want it to look kind of like a loading icon, like fcc’s loading icon
Your code so far


<style>
  .ball1 {
    border-radius: 50%;
    position: fixed;
    width: 50px;
    height: 50px;
    top: 60%;
    animation-name: ball1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    background: red;
    left: 25%;
    animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
  }
  .ball2 {
    border-radius: 50%;
    position: fixed;
    width: 50px;
    height: 50px;
    top: 60%;
    animation-name: ball2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    background: green;
    left: 50%;
    animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
  }
.ball3 {
    border-radius: 50%;
    position: fixed;
    width: 50px;
    height: 50px;
    top: 60%;
    animation-name: ball3;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    background: blue;
    left: 75%;
    animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
  }
  @keyframes ball1 {
    17% {
      top: 10%;
    }
  }
   @keyframes ball2 {
    50% {
      top: 10%;
    }
   }
    @keyframes ball3 {
    83% {
      top: 10%;
    }
    }


</style>
<div class="ball1"></div>
<div class="ball2"></div>
<div class="ball3"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36.

Challenge: Make Motion More Natural Using a Bezier Curve

Link to the challenge:

You can set the animation-delay property for each ball.

Your current attempt won’t work, because ball1 moves to the top very fast (17% of 2 seconds), and has then a lot of time (the remaining 83%) to move back. For ball3, it’s the other way around: it moves to the top very slowly and moves back very fast.

1 Like

tnx, it works!
did l get the delay times right though?

<style>
  .ball1 {
    border-radius: 50%;
    position: fixed;
    width: 50px;
    height: 50px;
    top: 60%;
    animation-name: ball1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    background: red;
    left: 25%;
    animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
    animation-delay: -666ms;
  }
  .ball2 {
    border-radius: 50%;
    position: fixed;
    width: 50px;
    height: 50px;
    top: 60%;
    animation-name: ball2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    background: green;
    left: 50%;
    animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
    animation-delay: -333ms;
  }
.ball3 {
    border-radius: 50%;
    position: fixed;
    width: 50px;
    height: 50px;
    top: 60%;
    animation-name: ball3;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    background: blue;
    left: 75%;
    animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
    animation-delay: 0ms;
  }
  @keyframes ball1 {
    50% {
      top: 40%;
    }
  }
   @keyframes ball2 {
    50% {
      top: 40%;
    }
   }
    @keyframes ball3 {
    50% {
      top: 40%;
    }
    }


</style>
<div class="ball1"></div>
<div class="ball2"></div>
<div class="ball3"></div>

What do you mean by “right”, that depends on what you want to happen?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.