使用 CSS 动画更改部分文本

Question

我在 HTML 页面中有一个文本，我想用动画更改其中的一部分。

我找到了这个question，但它不适用于我的情况，或者它似乎不是我正在寻找的解决方案。 这是我的代码：

.change:before {
  content: '2';
  opacity: 1;
  animation-name: change-letter;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes change-letter {
  0% { opacity: 0.5; }
  17% { opacity: 0; content: "3"; }
  34% { opacity: 0.5; }
  50% { opacity: 1; }
  66% { opacity: 0.5; }
  85% { opacity: 0; content: "2"; }
  100% { opacity: 0.5; }
}

<span>My application version <span class="change"></span></span>

如您所见，动画未按预期工作。我的意思是“2”在“3”之前出现两次，然后“2”再次出现，不透明度为 1 而不是 0.5。请查看 CSS 代码并仔细查看动画。动画的每一步似乎都没有遵循 CSS 代码。你能弄清楚我的代码有什么问题吗？如何使文本的最后部分以正确的方式变化？

Answer 1

请查收

.change:before {
  content: '2';
  font-size: 100%;
  animation-name: change-letter;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes change-letter {
  5% {
    opacity: 1;
    content: "2"
  }
  20% {
    opacity: 0.5;
    content: "2"
  }
  40% {
    opacity: 0;
    content: "2"
  }
  45% {
    opacity: 0;
    content: "3"
  }
  60% {
    opacity: 0.5;
    content: "3"
  }
  80% {
    opacity: 1;
    content: "3"
  }
  100% {
    opacity: 0;
    content: "3"
  }
  0% {
    opacity: 0;
    content: "2"
  }
}

<span>My application version <span class="change"></span></span>