滑动文字动画遇到麻烦 [英] Having trouble with sliding word animation

问题描述

我一直在制作CSS动画并遇到麻烦.我希望黄色跨度文本的动画类似于紫色跨度的动画，位于 https://getstark.co/pricing/(在该处显示和设计"，并不断将设计"一词更改为其他名称)

I've been working on a css animation and running into trouble. I would like the animation of the yellow span text to resemble that of the purple span at https://getstark.co/pricing/ (where it says "And designs" and keeps changing the word "designs" to something else)

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

Here's what I have so far. Notice how the yellow background takes 100% of the screen's width. I only want it to take the width of the text and also mimic the animation above.

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，请查看上面的代码笔.

For the CSS and HTML please look at the Code pen above.

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

Can someone please guide me in the right direction?

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

Unfortunately, I cannot use CSS content (text) feature because I need to support internationalization of text.

推荐答案

使用不带JavaScript的CSS关键帧动画，可以使其变得简单.

Make it simple by using CSS key-frame animation without 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>

您也可以在此处

我已经为动画使用了此解决方案.

这篇关于滑动文字动画遇到麻烦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！