How to change opacity in keyframes

HTML-CSS
1

Tell us what’s happening:

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%;
    opactiy:0.1;
    

  }
 
}

</style>

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0.

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

Link to the challenge:

2

Ahhhh! Simple spelling mistake. Opacity.

1 Like
3

:smile: :innocent: thnx sir