Cubic-bezier, done for you?

Tell us what’s happening:
Hi, on this task relating to cubic-bezier, in the description it say p0 and p4 are done for you as the represent the begging and end points (0,0) and (1,1) but then when you later input the CB it asks you to fill out all 4 P points and p0 is 0.25 while p4 is 0.75? So I don’t understand what it means by done for you?

Thanks as always.

Your code so far


<style>

.balls{
  border-radius: 50%;
  background: linear-gradient(
    35deg,
    #ccffff,
    #ffcccc
  );
  position: fixed;
  width: 50px;
  height: 50px;
  margin-top: 50px;
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
#ball1 {
  left: 27%;
  animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
#ball2 {
  left: 56%;
  animation-timing-function: ease-out;
}

@keyframes bounce {
  0% {
    top: 0px;
  }
  100% {
    top: 249px;
  }
}

</style>

<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Challenge: Learn How Bezier Curves Work

Link to the challenge:

Sorry I meant P3 not P4.

So the first two numbers are P1 and second two are P2? Think i’ve got it. Or actually i’m not sure about this?

i don’t see what i’m missing here it tells me to put in (0, 0, 0.58, 1) for the cubic-bezier but for some reason it’s not going at the same speed as ease-out? I’ve watched the video and I seem to be doing it right?

Thanks

Your code so far


<style>
.balls{
  border-radius: 50%;
  position: fixed;
  width: 50px;
  height: 50px;
  margin-top: 50px;
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
#red {
  background: red;
  left: 27%;
  animation-timing-function: cubic-bezier (0, 0, 0.58, 1);
}
#blue {
  background: blue;
  left: 56%;
  animation-timing-function: ease-out;
}
@keyframes bounce {
  0% {
    top: 0px;
  }
  100% {
    top: 249px;
  }
}
</style>
<div class="balls" id= "red"></div>
<div class="balls" id= "blue"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Challenge: Use a Bezier Curve to Move a Graphic

Link to the challenge:

Sorry I sorted it I put a space after the cubic-bezier and it (numbers), woops. Kinda things that could take me ages to find.