Applied Visual Design keyframes (animation-timing-function)

Tell us what’s happening:
I have added the animation-timing-function for both ball1 and ball2, linear and ease-out respectively. That is what the challenge asks for yet it continues to give me an error message. The website even works just as it is supposed to with the balls arriving at the bottom at same time. Is this a bug of sorts?

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/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

Welcome, winner.

I have tested your code in my browser, and it passes the tests. Therefore, it is likely one of the following issues for you:

  1. Your browser/version is not entirely compatible for this challenge (it happens). Solution: Do the lesson in a different browser.
  2. You have a browser extension which is blocking the tests from being run properly. Test: Look in your development console (Ctrl+Shift+i (for Chrome)), find an error. Solution: disable extension for the tests.

Hope this helps.

Bless you! Thank you very much

Tried Microsoft edge, IE, and chrome without any luck. No errors in dev console either.

I’m having the exact same issue in the “Decrease Opacity” section. I’ve tried 5 browsers and even went on to complete the module without receiving any similar errors. I’m on my 2nd day now troubleshooting this so I can get my bloody checkmark lol

I hear you. Havent had any issues until the second to last lesson. The checkmark was so close.

Mozilla Firefox did allow the website to function properly so I made it past this. Thank you so much for the help.

1 Like

Got my problem fixed by running it in Firefox. You may have already tried that browser but just wanted to let you know. Peace