Набор ключевых кадров для CSS

.animated-text {
         font-family: monospace;
         overflow: hidden;
         height:1.1em;
         word-wrap: break-word;
         white-space: nowrap;
         animation: typing 4s steps(16) forwards;
        }

        @keyframes typing {
         from { 
        width: 0;
          }

          to { 
            width: 16ch;
         }
        }

 <li class = "indent1">
<a href = "#beliebte-steeldartscheiben" 
        onclick = "smoothScroll(document.getElementById('beliebte- 
        steeldartscheiben'))">Die beliebtestens Steel-Dartscheiben im Vergleich</a> 
        - <span class = "animated-text">Produktvergleich</span>
</li>