How can I slow down my CSS Animated Text transitions?

问题

I created a sentence with a group of words in between that are animated to fade transition one after the other. But now the words are transitioning rapidly, and I can't seem to adjust the speed.

So far I've tried to change the property: animation-delay: -8s; on all the span:childs, but this doesnt change the speed of the transitions. I've also tried to alter the property animation: elements 10s infinite linear; with no luck.

I'm failrly new to CSS3 animations, and I need help in understanding:

How to slow down CSS animation transitions?
How can I control the speed?

The Code (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>

回答1:

I guess that's the result that youre looking for:

.slidingVertical span with opacity:0 plus max-width:10px and each word with a positive delay from 0 to 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>

Alternatively, I did rebuild the animation in a way to let it easier to control it's velocity. On the following example you just need to change the animation lenght value (animation: elements 30s infinite linear;) to control it's speed (there is no individual delay on each word).

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>

来源：https://stackoverflow.com/questions/36454643/how-can-i-slow-down-my-css-animated-text-transitions

标签

css

css3

css-transitions

css-animations