Problem with animation and pseudo function in css

Can we use both in one line? Can we use pseudo-class in animation I am doing so to display my name on the screen letter by letter.

Here is my code:

@keyframes name {
  20% {
    #sa::after {
      content: "A";
    }
  }
  40% {
    #sa::after {
      content: "T";
    }
  }
  60% {
    #sa::after {
      content: "Y";
    }
  }
  80% {
    #sa::after {
      content: "A";
    }
  }
  100% {
    #sa::after {
      content: "M";
    }
  }
}
#sa {
  font-size: 50px;
  color: white;
  font-weight: 800;
  animation-name: name;
  animation-duration: 5s;
}

It is not working. How can I display my name step by step on the screen.