Change Animation Timing with Keywords (error)

This is my code for the following lesson and when I try to run the code it’s coming up as an error for the both, I’ve even checked the given video to see if I typed any code wrong but its the same as what was shown.

My Code For The Lesson


<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: linear;
}
#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; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763.

Challenge: Change Animation Timing with Keywords

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/change-animation-timing-with-keywords

@Xosteric What browser are you using? Do you see any errors showing in your browser’s console?

I’m using Microsoft Edge, I’ll try to use Chrome to see if that changes anything.

do that, don’t use Edge with the curriculum, they don’t play nice together