Learn How Bezier Curves Work,,

HTML-CSS
1

In the exercise, i should use cubic-bezier for Linear

**here is the code for the Linear animation-timing-function with cubic-bezier **


<style>


    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, 0, 1, 1);
  }
  #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>





I tried all the values possible but it dont work.
2

They want you to use the point values given inthe example

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
3

cubic-bezier function value is the problem here , the values are (0.25,0.25,0.75,0.75)

4

Oh, thank you very much, i tough that i tried this but no hahaa

1 Like