Applied Visual Design: Change Animation Timing with Keywords Issue

HTML-CSS
1

Tell us what’s happening:
I have reset and re-coded this exercise several times, but it doesn’t work. I watched the video to be sure that my code matched what was needed and it does. Still when I run it, I get an error telling me that my code should be exactly what it is. Not sure what’s going on here, if it’s a glitch or a browser problem (using Microsoft Edge on my Surface Pro 4) but every other lesson has worked just fine.

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: 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: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362</code>.

**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
2

The challenge tests do not work well on Safari, Edge, or Internet Explorer. The curriculum works best when using Chrome.

Let us know if you are still having trouble when using Chrome.