Learn How Bezier Curves Work problem

same problem, im completed the code of “animaiton-timing-function: cubic-bezier(.25, .25, .75, .75);” .
but this is not working,some error showing on this.
plz reply fast.

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%;
    animaiton-timing-function: cubic-bezier(.25, .25, .75, .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 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/learn-how-bezier-curves-work/

The code passes the test for me. What exactly is the error?

If you mean not working in the animation then that is correct. It has to do with the linear keyword which is equivalant to the number we have put in. But the code bellow you did made should pass the code

  #ball1 { 
   left: 27%;
   animaiton-timing-function: cubic-bezier(.25, .25, .75, .75);
 }

sorry,nothing. its’s working.