css - 使用 css 动画文本

Question

我正在尝试使用 css 中的关键帧为文本设置动画:

我的 html 代码:

@keyframes animate {
  0% {
    content: "Animate"
  }
  50% {
    content: "text using"
  }
  100% {
    content: "CSS!!"
  }
}

.change-text::after {
  animation: animate 5s infinite;
}

<center>
  <p class="change-text">
    Text will change here
  </p>
</center>

但是文字没有变化，帮我看看我的代码哪里出了问题？

Answer 1

发生这种情况是因为您没有在 after 中提供 content 属性。只需将 content: ""; 添加到 .change-text::after

@keyframes animate{
  0%{
    content : "Animate"
  }
  50%{
    content : "text using"
  }
  100%{
    content : "CSS!!"
  }
}
.change-text::after{
  animation : animate 5s infinite;
  content: ""; // Added 
}

<center>
  <div class="change-text">
    Text will change here
  </div>
</center>