CSS 书写动画交替无限切掉最后一个字母

Question

我想做一个无限交替的书写动画。一切正常，但由于某种原因，最后一个字母总是被截断。

我希望有人能解释为什么它会被切断以及如何解决这个问题。

我的代码：

body {
  height: 100vh;
  font-family: monospace;
  display: flex;
  justify-content: center;
  align-items: center;
}

li {
  list-style-type: none;
}

.first {
  font-size: 2.5rem;
  position: relative;
  width: max-content;
}

.first::before,
.first::after {
  content: '';
  position: absolute;
  height: 3.5rem;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.first::before {
  background-color: white;
  animation: typewriter 1.5s steps(7) alternate infinite;
}

.first::after {
  width: .125rem;
  background-color: black;
  animation: typewriter 1.5s steps(7) alternate infinite, blink 500ms steps(7) infinite;
}

@keyframes typewriter {
  to {
    left: 100%;
  }
}

@keyframes blink {
  to {
    background: transparent;
  }
}

<li class="first">student</li>

Answer 1

增加您的 left 值并增加您的 step 计数。

body {
  height: 100vh;
  font-family: monospace;
  display: flex;
  justify-content: center;
  align-items: center;
}

li {
  list-style-type: none;
}

.first {
  font-size: 2.5rem;
  position: relative;
  width: max-content;
}

.first::before,
.first::after {
  content: '';
  position: absolute;
  height: 3.5rem;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.first::before {
  background-color: white;
  animation: typewriter 1.5s steps(8) alternate infinite;
}

.first::after {
  width: .125rem;
  background-color: black;
  animation: typewriter 1.5s steps(8) alternate infinite, blink 500ms steps(8) infinite;
}

@keyframes typewriter {
  to {
    left: 110%;
  }
}

@keyframes blink {
  to {
    background: transparent;
  }
}

<li class="first">student</li>

较长的单词：

body {
  height: 100vh;
  font-family: monospace;
  display: flex;
  justify-content: center;
  align-items: center;
}

li {
  list-style-type: none;
  margin: 3em 0;
}

.first {
  font-size: 2.5rem;
  position: relative;
  width: max-content;
}

.first::before,
.first::after {
  content: '';
  position: absolute;
  height: 3.5rem;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.first::before {
  background-color: white;
  animation: typewriter 1.5s steps(8) alternate infinite;
}

.first::after {
  width: .125rem;
  background-color: black;
  animation: typewriter 1.5s steps(8) alternate infinite, blink 500ms steps(8) infinite;
}

.second::before {
  background-color: white;
  animation: typewriter 2.5s steps(16) alternate infinite;
}

.second::after {
  width: .125rem;
  background-color: black;
  animation: typewriter 2.5s steps(16) alternate infinite, blink 500ms steps(16) infinite;
}

@keyframes typewriter {
  to {
    left: 110%;
  }
}

@keyframes blink {
  to {
    background: transparent;
  }
}

<ul>
<li class="first">student</li>
<li class="first second">studentstudent</li>
</ul>

Answer 2

这是我文章中的通用方法：https://dev.to/afif/a-scalable-css-only-typewriter-effect-2opn

body {
  height: 100vh;
  font-family: monospace;
  display: flex;
  justify-content: center;
  align-items: center;
}

li {
  list-style-type: none;
}

.first {
  font-size: 2.5rem;
}

.type {
  font-size:50px;
  display:inline-flex;
}

.type span {
  height:1.2em;
  width:0%;
  word-break:break-all;
  overflow: hidden;
  animation:
    c 0.2s infinite steps(1),  
    t 3s linear infinite alternate;
}
.type span:before {
  content:" ";
  display:inline-block;
}

@keyframes t{
  90%,100% {width:100%}
}

@keyframes c{
  0%,100%{box-shadow:2px 0 0 #0000}
  50%    {box-shadow:2px 0 0 #000 }
}

<li class="first type"><span>student</span></li>

使用您的方法，更新如下代码。您必须考虑 8 个步骤并将 1ch 添加到最终的 left 值

body {
  height: 100vh;
  font-family: monospace;
  display: flex;
  justify-content: center;
  align-items: center;
}

li {
  list-style-type: none;
}

.first {
  font-size: 2.5rem;
  position: relative;
  width: max-content;
}

.first::before,
.first::after {
  content: '';
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.first::before {
  background-color: white;
  animation: typewriter 1.5s steps(8) alternate infinite;
}

.first::after {
  width: .125rem;
  background-color: black;
  animation: 
   typewriter 1.5s steps(8) alternate infinite,
   blink 500ms steps(8) infinite;
}

@keyframes typewriter {
  to {
    left: calc(100% + 1ch);
  }
}

@keyframes blink {
  to {
    background: transparent;
  }
}

<li class="first">student</li>

CSS 书写动画交替无限切掉最后一个字母

CSS writing animation alternate infinite cuts last letter off

html

css

css-animations

keyframe