Https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/change-animation-timing-with-keywords

Https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/change-animation-timing-with-keywords
0

*Tell us what’s happening:
This is not being accepted for some reason and I don’t know why.

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: 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.

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

Please describe the error message you are receiving or the behavior you are expecting from this code.

It only happened when I was using Edge. When I switched to chrome it was okay.

Hummmmmmmmmmm I would recommend you to stop using Microsoft Edge and start using Chrome. For several reasons, Chrome is the more reliable browser in the market right now. I’m not saying it’s good. I’m just saying it is the best available option right now for web development.