How to change opacity in keyframes

Tell us what’s happening:

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 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:

Ahhhh! Simple spelling mistake. Opacity.

1 Like

:smile: :innocent: thnx sir