如何减慢我的 CSS 动画文本过渡？答案

【问题标题】：How can I slow down my CSS Animated Text transitions?如何减慢我的 CSS 动画文本过渡？
【发布时间】：2016-07-27 01:31:27
【问题描述】：

我创建了一个句子，其中包含一组单词，这些单词被动画以一个接一个地淡出过渡。但是现在换词的速度很快，我好像没法调速度。

到目前为止，我已尝试更改属性：animation-delay: -8s; 在所有跨度上：孩子，但这不会改变过渡。我还尝试更改属性 动画：元素 10 秒无限线性； 没有运气。

我对 CSS3 动画非常陌生，我需要帮助来理解：

如何减慢 CSS 动画过渡？
如何控制速度？

守则 (https://jsfiddle.net/qgrvaqfg/1/)：

.sentence {   
  display: inline-block;   
  overflow: hidden;   
  height: 2em; 
  vertical-align: top; 
}
.sentence p {   
  display: inline-block; 
}
.slidingVertical {  
  display: inline-block;  
  vertical-align: text-top; 
}
.slidingVertical span {
  display: block;  
  height: 40px;  
  margin-bottom: -40px;  
  overflow: hidden; 
}
.slidingVertical span {   
  animation: elements 10s infinite linear; 
} 
.slidingVertical span:nth-child(1) { 
  animation-delay: -8s; 
} 
.slidingVertical span:nth-child(2) {  
  animation-delay: -9s; 
} 
.slidingVertical span:nth-child(3) { 
  animation-delay: -10s; 
}
.slidingVertical span:nth-child(4) {
  animation-delay: -11s; 
} 
.slidingVertical span:nth-child(5) { 
  animation-delay: -12s; 
}
.slidingVertical span:nth-child(6) { 
  animation-delay: -13s;
}
.slidingVertical span:nth-child(7) { 
  animation-delay: -14s; 
}
.slidingVertical span:nth-child(8) { 
  animation-delay: -15s;
} 
.slidingVertical span:nth-child(9) {
  animation-delay: -16s; 
} 
.slidingVertical span:nth-child(10) {
  animation-delay: -17s; 
}    
@keyframes elements {   
  0% {
    opacity: 0;
    max-width: 10px;  
  }   
  5%, 10% {
    opacity: 1;
    max-width: 400px; 
  }  
  15%, 100% {
    opacity: 0;
    max-width: 10px;
  }
}

<body>
  <section class="wrapper">
    <h2 class="sentence">Janie is a lovely girl because she is
      <div class="slidingVertical">
        <span>amazing</span>
        <span>beautiful</span>
        <span>cute</span>
        <span>honest</span>
        <span>cool</span>
        <span>brave</span>
        <span>wild</span>
        <span>interesting</span>
        <span>local</span>
        <span>sexy</span>
      </div>
      <p>
        and cool. 
      </p>
    </h2>
  </section>
</body>

【问题讨论】：

她当然是，但有时我希望她能慢慢来，不要这么快过渡

标签： css css-transitions css-animations

【解决方案1】：

我猜这就是您要寻找的结果：

.slidingVertical span 加上opacity:0 加上max-width:10px 并且每个单词都有一个从0到9的正延迟）：

body {
  background: pink;  
}

.sentence {
  display: inline-block;
  overflow: hidden;
  height: 2em;
  vertical-align: top;
}

.sentence p {
  display: inline-block;
}

.slidingVertical {
  display: inline-block;
  vertical-align: text-top;
}

.slidingVertical span {
  display: block;
  height: 40px;
  margin-bottom: -40px;
  overflow: hidden;
}

.slidingVertical span {
  animation: elements 20s infinite linear;
  opacity: 0;
  max-width: 10px;  
}

.slidingVertical span:nth-child(1) {   animation-delay: 0s;  } .slidingVertical span:nth-child(2) {   animation-delay: 2s;  } .slidingVertical span:nth-child(3) {   animation-delay: 4s;  } .slidingVertical span:nth-child(4) {   animation-delay: 6s;  } .slidingVertical span:nth-child(5) {   animation-delay: 8s;  } .slidingVertical span:nth-child(6) {   animation-delay: 10s; } .slidingVertical span:nth-child(7) {   animation-delay: 12s;  } .slidingVertical span:nth-child(8) {   animation-delay: 14s; } .slidingVertical span:nth-child(9) {   animation-delay: 16s;  } .slidingVertical span:nth-child(10) {   animation-delay: 18s;  }

@keyframes elements {
  0% {
     opacity: 0;
     max-width: 10px;  
  }
  
  6%, 9% {
     opacity: 1;
     max-width: 400px; 
  }
  
  12%, 100% {
     opacity: 0;
     max-width: 10px;
  }
}

<section class="wrapper">

<h2 class="sentence">Janie is a lovely girl because she is
<div class="slidingVertical">
    <span>amazing</span>
    <span>beautiful</span>
    <span>cute</span>
    <span>honest</span>
    <span>cool</span>
    <span>brave</span>
    <span>wild</span>
    <span>interesting</span>
    <span>local</span>
    <span>sexy</span>
</div>
<p>and cool.</p>
</h2>

</section>

另外，我确实重建了动画，以便更容易控制它的速度。在以下示例中，您只需更改动画长度值 (animation: elements 30s infinite linear;) 即可控制其速度（每个单词没有单独的延迟）。

body {
  background: plum;  
}

.sentence {   
  display: inline-block;   
  overflow: hidden;   
  height: 80px; 
  vertical-align: top; 
}

.sentence p {
  display: inline-block;
}

.slidingVertical {  
  display: inline-block;  
  vertical-align: text-top; 
}

.slidingVertical span {
  display: block;  
  height: 40px;  
  margin-bottom: -40px;  
  overflow: hidden; 
}

.slidingVertical span:before { 
  content: '';
  opacity: 1;
  display: inline-block;  
  max-width: 10px; 
  overflow: hidden; 
  animation: elements 30s infinite linear; 
} 

@keyframes elements {  
    0% {
content: 'sexy';
opacity: 1;
max-width: 400px; 
  }
    4% {
content: 'sexy';
opacity: 1;
max-width: 400px; 
  }
    5% {
content: 'sexy';
opacity: 0;
max-width: 10px; 
  }
    6% {
content: 'amazing';
opacity: 0;
max-width: 10px;  
  } 
    10% {
content: 'amazing';
opacity: 1;
max-width: 400px; 
  }
    14% {
content: 'amazing';
opacity: 1;
max-width: 400px;  
  }
    15% {
content: 'amazing';
opacity: 0;
      max-width: 10px; 
  }
    16% {
content: 'beautiful';
opacity: 0;
max-width: 10px; 
  } 
    20% {
content: 'beautiful';
opacity: 1;
max-width: 400px; 
  }
    24% {
content: 'beautiful';
opacity: 1;
max-width: 400px; 
  }
    25% {
content: 'beautiful';
opacity: 0;
max-width: 10px; 
  }
    26% {
content: 'cute';
opacity: 0;
max-width: 10px; 
  } 
    30% {
content: 'cute';
opacity: 1;
max-width: 400px; 
  }
    34% {
content: 'cute';
opacity: 1;
max-width: 400px; 
  }
    35% {
content: 'cute';
opacity: 0;
max-width: 10px; 
  }
    36% {
content: 'honest';
opacity: 0;
max-width: 10px;  
  }
    40% {
content: 'honest';
opacity: 1;
max-width: 400px; 
  }
    44% {
content: 'honest';
opacity: 1;
max-width: 400px; 
  }
    45% {
content: 'honest';
opacity: 0;
max-width: 10px; 
  }
    46% {
content: 'cool';
opacity: 0;
max-width: 10px;
  }
    50% {
content: 'cool';
opacity: 1;
max-width: 400px; 
  }
    54% {
content: 'cool';
opacity: 1;
max-width: 400px; 
  }
    55% {
content: 'cool';
opacity: 0;
max-width: 10px; 
  } 
    56% {
content: 'brave';
opacity: 0;
max-width: 10px; 
  }
    60% {
content: 'brave';
opacity: 1;
max-width: 400px; 
  }
    64% {
content: 'brave';
opacity: 1;
max-width: 400px; 
  }
    65% {
content: 'brave';
opacity: 0;
max-width: 10px; 
  }
    66% {
content: 'wild';
opacity: 0;
max-width: 10px; 
  }
    70% {
content: 'wild';
opacity: 1;
max-width: 400px; 
  }
    74% {
content: 'wild';
opacity: 1;
max-width: 400px; 
  }
    75% {
content: 'wild';
opacity: 0;
max-width: 10px; 
  }
    76% {
content: 'interesting';
opacity: 0;
max-width: 10px; 
  }
    80% {
content: 'interesting';
opacity: 1;
max-width: 400px; 
  }
    84% {
content: 'interesting';
opacity: 1;
max-width: 400px; 
  }
    85% {
content: 'interesting';
opacity: 0;
max-width: 10px; 
  }
    86% {
content: 'local';
opacity: 0;
max-width: 10px; 
  }
    90% {
content: 'local';
opacity: 1;
max-width: 400px; 
  }
    94% {
content: 'local';
opacity: 1;
max-width: 400px;  
  }
    95% {
content: 'local';
opacity: 0;
max-width: 10px; 
  }
     96% {
content: 'sexy';
opacity: 0;
max-width: 10px;        
  }
    100% {
content: 'sexy';
opacity: 1;
max-width: 400px; 
  }
}

<section class="wrapper">

<h2 class="sentence">Janie is a lovely girl because she is
<div class="slidingVertical">
    <span></span>
</div>
<p>and cool.</p>
</h2>

</section>

【讨论】：

你能再慢一点吗？你如何控制速度？
这里有3个变化点来控制速度：元素10s，动画延迟：0s；以及关键帧位置5%, 10% 15%；但它们都需要和谐；如果您编辑一个，您还需要编辑其他的以完成 cicle，而不会出现任何重叠/跳跃
在一个例子中，我做了一个更新：现在动画的总时间是 20 所以我也必须更新延迟值，现在它们是 0,2,4 ,6,8,10,12,14,16,18 而不是 0,1,2,3,4,5,6,7,8,9
感谢您的解释！现在我明白了哪些值会改变速度。干杯！