Question

我正在处理我的作品集，并在第二行文本中添加了打字机效果，但是我觉得它进行得太快了。我尝试调整动画秒数，延迟等，但是没有任何效果。这是代码：

HTML

    <div class="banner">
  <div class="container h-100">
    <div class="row h-100 align-items-center">
      <div class="col-12 text-center">
        <h1 class="font-weight-light">Hi, I'm Kevin McCall</h1>
                      <!--Typewriter Animation Here-->
        <p class="font-weightlead">A Front-End Web Developer<span class="blinkcursor"> 
      _</span></p>
      </div>
    </div>
  </div>
</div>

CSS

/* Typewriter Effect */
.banner p {
color: red;
font-size: 50px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow-wrap: break-word;
overflow: hidden;
max-width: 100%;
display: inline-block;
animation: typing 4s steps(60, end);
animation-delay: 2s;
 }

 /* Blinking Underscore */
.blinkcursor{
 animation: blink 1s infinite;
 color: white;
 }

/* Typing Animation */
@keyframes typing {
from {
    max-width: 0%;
}
to {
    max-width: 100%;
}
}

/* Blinking Underscore */
@keyframes blink{
to {opacity: 0;}

}

Answer 1

Check the syntax for using "animation" in CSS.有多种使其运作的方法，例如：

animation: 10s steps(60, end) typing;

其中 10s 是持续时间变量。或者，您可以使用animation-duration。

这对您在Chrome中的代码非常有用。

如何降低打字机文本动画的速度？

1 个答案: