Create Visual Direction by Fading an Element from Left to Right

HTML-CSS
1

Hi guys, i would like to know how to solve this problem. I don’t understand the way I should answer this question.

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%;
       ball: 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/66.0.3359.181 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

i saw, instead of using it as ball: opacity(0.1); i should have used opacity: 0.1;

1 Like
3 
<style>

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

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

</style>

<div id="ball"></div>
2 Likes
4

You have made mistake at keyframes. The correct way would be: @Oliver_Olivier

image

Hope this help you.

1 Like
5

You should include opacity: 0.1; in the @keyframes rule.

#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%; opacity: 0.1; } }
2 Likes
6

You don’t have to identify “ball:” because the @keyframes rule is already pointed there, and your opacity value does not need parentheses.
I hope this helps.