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>

使用CSS动画更改文本的一部分

1 个答案: