键入CSS的关键帧

Question

我使用以下html和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>

    

对我来说有什么蠢货吗？

Answer 1

默认情况下，

span是内联元素。您无法在内联元素上设置宽度。

您可以使用display: block，如下例所示，或切换span div

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

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 16ch;
  }
}

<span class="animated-text">Produktvergleich</span>