Not Sure where to place Opacity code

HTML-CSS
1

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.

Sincerely,

Mark Scott Benson

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%;
      
    }
  }

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

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

2

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
3

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.

4

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.

5

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

1 Like
6

can someone tell me what this does not work?

animation-name: fade;

animation-duration: 3s;

}

@keyframes fade {

50% {

  left: 60%;

}

}

@keyframes fade {

50% {

  right: 50%;

  opacity: 0.1;

}

}

8

This topic is over 2 years old. Please don’t resurrect old posts.

If you’re having an issue with one of the lessons, use the ‘Ask for Help’ button.

If you have an issue with code that you are writing please open a new topic describing the issue you’re having. Provide a link to your working code so that others can see the issue in its entirety.