html - 滑字动画有问题

Question

我一直在研究 CSS 动画，但遇到了麻烦。我希望黄色跨度文本的动画类似于 https://getstark.co/pricing/ 处的紫色跨度文本。 (它说“和设计”并不断将“设计”一词更改为其他词)

这是我目前所拥有的。 请注意黄色背景如何占据屏幕宽度的 100%。我只希望它采用文本的宽度并模仿上面的动画。

https://codepen.io/weina-scott/pen/OJLZwLe

.plans-wrapper-header {
  width: 700px;
  border: 2px solid red;
}
.plans-wrapper-title span {
     font-size: 48px;
     font-weight: 900;
     line-height: 48px;
     margin-bottom: 60px;
     text-align: left;
     font-family: Arial;
     opacity: 1;
     display: inline;
     color: black;
}
 .plans-wrapper-title .plans-wrapper-title-item {
     display: inline;
     line-height: 40px;
     margin-left: 3px;
}
 .plans-wrapper-title .plans-wrapper-title-item span {
     font-size: 48px;
     font-weight: 900;
     margin-bottom: 60px;
     padding: 8px;
     text-align: left;
     background-color: #ffda00;
     position: absolute;
     opacity: 0;
     display: inline;
     font-family: Arial;
     overflow: hidden;
   width: 100%;
     color: black;
     animation: rotateWords 30s linear infinite 0s;
}
 .plans-wrapper-title .plans-wrapper-title-item span:nth-child(2) {
     animation-delay: 3s;
}
 .plans-wrapper-title .plans-wrapper-title-item span:nth-child(3) {
     animation-delay: 6s;
}
 .plans-wrapper-title .plans-wrapper-title-item span:nth-child(4) {
     animation-delay: 9s;
}
 .plans-wrapper-title .plans-wrapper-title-item span:nth-child(5) {
     animation-delay: 12s;
}
 .plans-wrapper-title .plans-wrapper-title-item span:nth-child(6) {
     animation-delay: 15s;
}
 .plans-wrapper-title .plans-wrapper-title-item span:nth-child(7) {
     animation-delay: 18s;
}
 .plans-wrapper-title .plans-wrapper-title-item span:nth-child(8) {
     animation-delay: 21s;
}
 .plans-wrapper-title .plans-wrapper-title-item span:nth-child(9) {
     animation-delay: 24s;
}
 .plans-wrapper-title .plans-wrapper-title-item span:nth-child(10) {
     animation-delay: 27s;
}

@keyframes rotateWords {
     0% { opacity: 1; -webkit-animation-timing-function: ease-in; width: 0px; }
     10% { opacity: 0.3; width: 0px; }
     20% { opacity: 1; width: 100%; }
     27% { opacity: 0; width: 100%; }
     100% { opacity: 0; }
}

对于 CSS 和 HTML，请查看上面的代码笔。

有人可以指导我正确的方向吗？

不幸的是，我无法使用 CSS 内容(文本)功能，因为我需要支持文本的国际化。

Answer 1

通过使用 CSS 关键帧动画而不使用 JavaScript 使其变得简单。

下面是一个例子。

body{
    font-family:calibri;
  }
.plans-wrapper-title{
  margin:0;
}
.team, .marketing, .instagram, .stories, .campaign, .friends, .designs, .brand, .club{
  background-color: yellow; 
  display:inline-block;
  position: relative;
  vertical-align: top;
}
.hidden{
  background-color: yellow; 
  position:absolute;
  display:inline-block;
  opacity:0;
  animation: slideme 18s infinite;
  white-space: pre;
  width: auto;
}

.team{
  width: 70px;
}
.marketing{
  width: 135px;
}

.hidden:nth-child(1){
  animation-delay: 2s;
}
.hidden:nth-child(2){
  animation-delay: 4s;
}
.hidden:nth-child(3){
  animation-delay: 6s;
}

.hidden:nth-child(4){
  animation-delay: 8s;
}
.hidden:nth-child(5){
  animation-delay: 10s;
}
.hidden:nth-child(6){
  animation-delay: 12s;
}

.hidden:nth-child(7){
  animation-delay: 14s;
}
.hidden:nth-child(8){
  animation-delay: 16s;
}
.hidden:nth-child(9){
  animation-delay: 18s;
}
@keyframes slideme {
  0% {
    top: -20px;
    opacity:0;
  }
  5% {
    top: 0;
    opacity:1;
  }
  10%{
    top : 0;
    opacity:1;
  }
  15%{
    opacity:0;
  }
  20% {    
  opacity:0;
    top : 0;
  }
  30% {
    opacity:0;
    top: 20px;
  }
}

<div class="plans-wrapper-header">
    <h1 class="plans-wrapper-title">
      <div>
        Do more with your 
          <div class="brand plans-wrapper-title-item">
            <span class="hidden team">team</span>
            <span class="hidden marketing">marketing</span>
            <span class="hidden instagram">instagram</span>
            <span class="hidden stories">stories</span>
            <span class="hidden campaign">campaign</span>
            <span class="hidden friends">friends</span>
            <span class="hidden designs">designs</span>
            <span class="hidden brand">brand</span>
            <span class="hidden club">club</span>
        </div>
      </div>
  </h1>
</div>

也可以测试一下here

我用过this solution对于动画..