使用 css 旋转文本时遇到问题

Question

我正在尝试使用动画更改标题中的文本。然而，我尝试了几种方法，但动画总是从 50% 开始，低于 50% 的内容显示空白。我不知道我是否正确地传达了它这是我第一次出现堆栈溢出。如有任何帮助，我们将不胜感激。

 .our-service-heading{
    font-size: 40px;
    text-align: center;
}
#spin {
  color:rgb(255, 196, 0);
}
#spin:after {
  content:"";
  animation: spin 10s linear infinite;
}
@keyframes spin {
  0% { content:" Creative Commercials" }
  10% { content:" Explainer Videosr" }
  20% { content:" Corporate Documentary" }
  30% { content:" Cinematic Kickstarter Videos" }
  40% { content:" Creative Content & Script Writing" }
  50% { content: " Drone Filming" }
  60% { content: " Website Design & Advance Integration" }
  70% { content: " Professional Logo Designing" }
  80% { content: " Promotional Graphics Designing" }
  90% { content: " Corporate Event Coverage" }
}

<h2 class=" col-sm-12 our-service-heading  pt-4">
          We are making <span id="spin"> </span><br>better for everyone
      </h2>

Answer 1

嗯，在每个 CSS 规则的末尾添加 ; 似乎可行。

.our-service-heading {
  font-size: 40px;
  text-align: center;
}

#spin {
  color: rgb(255, 196, 0);
}

#spin:after {
  content: "";
  animation: spin 10s linear infinite;
}

@keyframes spin {
  0% {
    content: " Creative Commercials";
  }
  10% {
    content: " Explainer Videosr";
  }
  20% {
    content: " Corporate Documentary";
  }
  30% {
    content: " Cinematic Kickstarter Videos";
  }
  40% {
    content: " Creative Content & Script Writing";
  }
  50% {
    content: " Drone Filming";
  }
  60% {
    content: " Website Design & Advance Integration";
  }
  70% {
    content: " Professional Logo Designing";
  }
  80% {
    content: " Promotional Graphics Designing";
  }
  90% {
    content: " Corporate Event Coverage";
  }
  100% {
    content: " Everything";
  } // added
}

<h2 class=" col-sm-12 our-service-heading  pt-4">
  We are making <span id="spin"> </span><br>better for everyone
</h2>

使用 css 旋转文本时遇到问题

Having problem with rotating text using css

css

keyframe

css-animations