如何在不使用关键帧动画循环的情况下更改内容

How can I change the content without looping using keyframe animation

知道如何在不循环的情况下更改文本吗?我不想在动画中使用 infinite

.text {
  animation: changeText 5s infinite;
}

@keyframes changeText {
  0% {
    content: '';
  }
  50% {
    content: 'First Paragraph';
  }
  100% {
    content: 'Second Paragraph';
  }
}
<div class="text">Change me</div>

您只需从 animation: changeText 5s infinite 中删除参数 infinite。而且,如果您使用 css 动态更改文本,则需要使用伪 class :before:after。像那样:

.text:before {
  content: '';
  animation: changeText 5s;
} 

这是一个简单的例子。

.text:before {
  content: '';
  animation: changeText 5s;
}

@keyframes changeText {
  50% {
    content: 'First Paragraph';
  }
  100% {
    content: 'Second Paragraph' ;
  }
}
<div class="text"></div>