Question

我想在播放这段时间后使用steps（）在css中创建键入光标效果很长一段时间我无法找到这种行为异常的原因，我希望光标在指定的时间段后出现并消失。但它出现并在中途消失。什么可能导致这种行为？

please have a look at the fiddle.   
https://jsfiddle.net/jL1f4rzc/

Answer 1

我不喜欢使用这个步骤，而是在动画中使用百分比，如下所示：

.blink {
 animation : blink 1s 0s infinite;
 animation-direction: alternate;
}

@keyframes blink {
 0% {
  border-right:2px solid #000;
 }
 70% {
  border-right:2px solid #000;
 }
 75% {
  border-right: 2px solid transparent;
 }
 100% {
   border-right: 2px solid transparent;
 }
}

fiddle Updated

Answer 2

我正在检查如何使用步骤进行操作; D

答案对我来说不合逻辑

.blink {
 animation : blink 0.8s steps(2,end) 0s infinite;
}
.cursor {
 border: 0px solid transparent;
 border-right:0px solid #000;
}

@keyframes blink {
 from {
  border-right-width: 0px;
  }
 to {
  border-right-width: 2px;
 }
}

并且工作正常，但如果我将动画更改为：

@keyframes blink {
 from {
  border-right-width: 2px;
  }
 to {
  border-right-width: 0px;
 }
}

不能工作O_o！我希望这个版本对你有用。 fiddle Updated 2

在CSS步骤（）中创建键入光标效果时遇到动画问题

2 个答案: