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

[SparksV]

Tell us what’s happening:
Describe your issue in detail here.
I have tried to write the correct syntax to this problem but when I run it, it is not recognising the opacity. I have checked all extensions, spaces and brackets in the syntax to no avail. Please help.

  **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: 60%;
  }
}

@keyframes fade {
  50% {
    right: 50%;
    opacity: 0.1;

  }
}

  }
}


</style>

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

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36 Edg/90.0.818.62.

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

Link to the challenge:

freeCodeCamp.org

[Shadow2]

Try it on another brower.

[Roma]

@SparksV, the lesson did not ask you to create an additional @keyframes rule. It asked you to add the opacity property to what was already there.

Reset the lesson and carefully follow the instructions.

[SparksV]

Thanks Roma, but I have tried that as well. Still no joy . Will keep on trying again though.

[Roma]

@SparksV, Let us see your new code please.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[SparksV]

<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% {
      right: 50%;
      opacity: 0.1;

    }
  }

  

</style>

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

[Roma]

You’re almost there @SparksV.

You changed something that didn’t need to be changed. All you had to do was add the opacity property with a value of 0.1 to the existing @keyframes rule.

If you look closely at the rule it’s already set to 50%. You changed
left: 60%;
to be
right: 50%;
that’s why the test fails.

[SparksV]

wow, it has now worked. I must be the thickest dummy of all time. Thanks for your help. Much appreciated.

[Roma]

Hahaha…don’t beat yourself up. We all make these small mistakes.

Glad to have helped.