how to animate span tag text in paragraph tag

Question

How to increase width of span tag text due to in animation

.text{
  margin-top: 15px;
  margin-left: 180px;
  font-size: 50px;
  white-space: nowrap;
}
#dd{
  font-size: 40px;
  color: blue;
  animation: sample 2s steps(22) 1s infinite alternate;
  overflow: hidden;
  white-space: nowrap;
}
@keyframes sample{
  from{
    width: 10%;
    background-color: orangered;
  }
  to{
    width: 0%;
    background-color: yellow;
  }
}

 <p class="text">I am <span id="dd">Designer</span></p>