在CSS步骤中创建键入光标效果时面临动画问题()

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.cursor {
  animation: blink 1s infinite;
}

.cursor::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  animation: typing 1s steps(10) infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

.cursor {
  position: relative;
  display: inline-block;
  font-size: 16px;
}

.cursor::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  animation: typing 1s steps(10) infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.cursor {
  animation: blink 1s infinite;
}