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

时间：2016-04-06 14:49:05

标签： css css3 css-transitions css-animations

我创建了一个句子，其间有一组单词，这些单词是动画的，一个接一个地淡化过渡。但现在这些词语正在快速转变，我似乎无法调整速度。

  

到目前为止，我已尝试更改该属性：动画延迟：-8s;   所有的跨度：孩子，但这并没有改变的速度   过渡。我也尝试改变属性动画：   元素10s无限线性; 没有运气。

我对CSS3动画不熟悉，我需要帮助才能理解：

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

    3. 代码（https://jsfiddle.net/qgrvaqfg/1/）：

    ＆＃13;
    ＆＃13; 
    .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;
  }
}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

1 个答案:

答案 0 :(得分：2)

我想这就是你要找的结果：

<{> .slidingVertical span opacity:0加max-width:10px，每个字的延迟时间从0到9）：

＆＃13;
＆＃13; 
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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

或者，我确实以某种方式重建动画，以便更容易控制它的速度。在下面的示例中，您只需要更改动画长度值（animation: elements 30s infinite linear;）以控制它的速度（每个单词没有单独的延迟）。

＆＃13;
＆＃13; 
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; 
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题