Not Sure where to place Opacity code

Tell us what’s happening:
Good afternoon, I wondered if someone could help me with this one, as i’ve tried to look it up. it looks like i’ve got two sets of instructions, which is what’s throwing me off. I’ve got a learning disability and my brain works a little bit differently then someone else’s might.

Here’ s the first set of instructions.

“Target the element with the id of ball and add the opacity property set to 0.1 at 50%, so the element fades as it moves to the right.”

and below that is a check list of what you’re supposed to do. Here’s where the second set of instructions comes into play.

“The keyframes rule for fade should set the opacity property to 0.1 at 50%.”

down below in the body of this ticket is my code, Could someone help me place where I need to put the Opacity code?, If someone could help me with this, I would appreciate it, thank you.


Mark Scott Benson

Your code so far


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

  @keyframes fade {
    50% {
      left: 60%;


<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/67.0.3396.87 Safari/537.36.

Link to the challenge:

They’ve left you an empty line where they want you to put it, right below:

      left: 60%;

For simple insertion tests like this, they often leave you an empty line as a hint.

1 Like

Yeah I figured it out shortly after I sent you guys the message. Thanks for the quick reply Kevin, Sorry to sound like a dummie lol.

Trust me, you have a lot of catching up to do to even get close to my colossal mountain of stupid mistakes. Get used to it.

@keyframes fade {
50% {
left: 60%;
opacity: 0.1;

1 Like