我使用下面的代码来显示打字机的动画效果(来源https://codepen.io/thiagoteles/pen/ogoxLw)。我故意把所有东西都设置成慢速，以获得更清晰的结果。一切都很好，但逐一出现的每个字母都不完全可见，因为它右边的光标总是会擦除它的某些部分。有没有一种方法可以用纯css解决这个问题，或者我必须使用javascript？感谢
/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);
/* Global */
html{
min-height: 100%;
overflow: hidden;
}
body{
height: calc(100vh - 8em);
padding: 4em;
color: rgba(255,255,255,.75);
font-family:'Anonymous Pro' ,monospace ;
background-color: black;
}
.line-1{
position: relative;
top: 50%;
width: 24em;
margin: 0 auto;
border-right: 4px solid green;
font-size: 180%;
text-align: center;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
/* Animation */
.anim-typewriter{
animation: typewriter 100s steps(44) 1s 1 normal both,
blinkTextCursor 1000ms steps(544) infinite normal;
}
@keyframes typewriter{
from{width: 0;}
to{width: 24em;}
}
@keyframes blinkTextCursor{
from{border-right-color: green;}
to{border-right-color: transparent;}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet'>
<title>
Test
</title>
</head>
<body>
<p class="line-1 anim-typewriter">Animation typewriter style using css steps()</p>
</body>
</html>使用monspace字体时，需要考虑ch来定义宽度，因为1ch是1个字符的宽度。同时调整步骤以添加start
/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);
/* Global */
html {
min-height: 100%;
overflow: hidden;
}
body {
height: calc(100vh - 8em);
padding: 4em;
color: rgba(255, 255, 255, .75);
font-family: 'Anonymous Pro' ,monospace;
background-color: black;
}
.line-1 {
position: relative;
top: 50%;
margin: 0 auto;
width: 0;
border-right: 4px solid green;
font-size: 180%;
text-align: center;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
/* Animation */
.anim-typewriter {
animation:
typewriter 45s steps(44,start) 1s forwards,
blinkTextCursor 0.3s steps(15) infinite;
}
@keyframes typewriter {
from {
width: 0;
}
to {
width: 44ch;
}
}
@keyframes blinkTextCursor {
from {
border-right-color: green;
}
to {
border-right-color: transparent;
}
}<p class="line-1 anim-typewriter">Animation typewriter style using css steps()</p>