Keyframes not working for opacity assignment

Tell us what’s happening:

can someone tell me why this is not working?

here is the assignment…
" The keyframes rule for fade should set the opacity property to 0.1 at 50%."

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

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

Link to the challenge:

You only have the opacity set in one area. You will have to set opacity in another location with a value other than 0.1 so that you will see a change.

1 Like