Animation-timing-function

cant figure out whats wrong


<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: 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.123 Safari/537.36.

Challenge: Use a Bezier Curve to Move a Graphic

Link to the challenge:

First thing I notice is you have animation-timing-function: twice…

1 Like

haha,I just noticed it now and was heading to remove post

1 Like