Applied Visual Design: Create Visual Direction by Fading an Element from Left to Right

HTML-CSS
1

Tell us what’s happening:
Wondering if the browser is glitchy or if the lesson is not working at the moment, since I see from the forum this solution should work. Am I missing something?
When I run the ‘tests’ on it, it keeps coming up with error about the opacity setting.
See below response:
// running tests The

keyframes

rule for fade should set the

opacity

property to 0.1 at 50%. // tests completed

Your code so far


<style>

#ball {
  width: 70px;
  height: 70px;
  margin: 50px auto;
  position: fixed;
  left: 20%;
  border-radius: 50%;
  background: linear-gradient(
    35deg,
    #ccffff,
    #ffcccc
  );
  animation-name: fade;
  animation-duration: 3s;
}

@keyframes fade {
  50% {
    left: 50%;
    opacity: 0.1;
  }
}
</style>

<div id="ball"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36.

Challenge: Create Visual Direction by Fading an Element from Left to Right

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right

2

Hello, try to change the line " left:50%;" to “left:60%;” just above of the line of “opacity: 0.1%;”. Best regards!