I have tried over and over and even have the same answer as the help video and it keeps telling me it is incorrect. pls someone help me out

HTML-CSS
1

Tell us what’s happening:

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-funtion: linear;

}
#ball2 {
  left:56%;
  animation-timing-funtion: 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

2

Mind your spelling:

animation-timing-funtion: linear;
// and
animation-timing-funtion: ease-out;

You are missing a *c* --> function

Hope this helps :+1:

2 Likes
3

yea I do see that however I just corrected it with the same results. plus that was my tenth try possibly misspelling out of frustration. I have tried to mimic every last letter as in the demonstration video and it does not give me a completion. I am starting to think it is a fluke. I am beyond frustrated.

4

No need to worry, everybody makes spelling mistakes, especially when tired. No shame in that!

Talking about the challenge, have you tried refreshing your browser? Sometimes the lessons “hangs” after multiple attempt.

EDIT: Try completing this challenge with either Chrome or Firefox, the animations challenges used to have known bug on Edge and Safari

Happy coding.