blocks|key|4079830|text|下面是你如何做到这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4079831|​|4079832|/*+Safari+4.0+-+8.0+*/
@-webkit-keyframes+slideInFromBottomMulti+{
++0%25+{
++++-ms-transform:+translateY(50px);+/*+IE+9+*/
++++-webkit-transform:+translateY(50px);+/*+Safari+3-8+*/
++++transform:+translateY(50px);
++++opacity:+0;
++}
++50%25+{
++++-ms-transform:+translateY(0);+/*+IE+9+*/
++++-webkit-transform:+translateY(0);+/*+Safari+3-8+*/
++++transform:+translateY(0);
++++opacity:+1;
++}
++80%25+{
++++-ms-transform:+translateY(0);+/*+IE+9+*/
++++-webkit-transform:+translateY(0);+/*+Safari+3-8+*/
++++transform:+translateY(0);
++++opacity:+1;
++}
++100%25+{
++++-ms-transform:+translateY(0);+/*+IE+9+*/
++++-webkit-transform:+translateY(0);+/*+Safari+3-8+*/
++++transform:+translateY(0);
++++opacity:+0;
++}
}

/*+Standard+syntax+*/
@keyframes+slideInFromBottomMulti+{
++0%25+{
++++-ms-transform:+translateY(50px);+/*+IE+9+*/
++++-webkit-transform:+translateY(50px);+/*+Safari+3-8+*/
++++transform:+translateY(50px);
++++opacity:+0;
++}
++50%25+{
++++-ms-transform:+translateY(0);+/*+IE+9+*/
++++-webkit-transform:+translateY(0);+/*+Safari+3-8+*/
++++transform:+translateY(0);
++++opacity:+1;
++}
++80%25+{
++++-ms-transform:+translateY(0);+/*+IE+9+*/
++++-webkit-transform:+translateY(0);+/*+Safari+3-8+*/
++++transform:+translateY(0);
++++opacity:+1;
++}
++100%25+{
++++-ms-transform:+translateY(0);+/*+IE+9+*/
++++-webkit-transform:+translateY(0);+/*+Safari+3-8+*/
++++transform:+translateY(0);
++++opacity:+0;
++}
}

#showcase-multi+p{
++margin:+5px+0;
++opacity:+0;
}

#showcase-multi{
++width:+500px;
++height:+150px;
++padding:+1.7rem;
++background-color:+#CC0000;
++color:+#fff;
++font-size:+2em;
}
#showcase-multi+#first-row{
++-webkit-animation:+slideInFromBottomMulti+2s+ease-out+0s+infinite;+/*+Safari+4.0+-+8.0+*/
++animation:+slideInFromBottomMulti+2s+ease-out+0s+infinite;
}
#showcase-multi+#second-row{
++-webkit-animation:+slideInFromBottomMulti+2s+ease-out+0.15s+infinite;+/*+Safari+4.0+-+8.0+*/
++animation:+slideInFromBottomMulti+2s+ease-out+0.15s+infinite;
}
#showcase-multi+#third-row{
++-webkit-animation:+slideInFromBottomMulti+2s+ease-out+0.3s+infinite;+/*+Safari+4.0+-+8.0+*/
++animation:+slideInFromBottomMulti+2s+ease-out+0.3s+infinite;
}|code-block|syntax|javascript|4079833|++++<div+id="showcase-multi">
++++++<p+id="first-row">First+row</p>
++++++<p+id="second-row">Second+row</p>
++++++<p+id="third-row">Third+row</p>
++++</div>|4079834|4079835|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Here's how you do it:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* Safari 4.0 - 8.0 */
@-webkit-keyframes slideInFromBottomMulti {
  0% {
    -ms-transform: translateY(50px); /* IE 9 */
    -webkit-transform: translateY(50px); /* Safari 3-8 */
    transform: translateY(50px);
    opacity: 0;
  }
  50% {
    -ms-transform: translateY(0); /* IE 9 */
    -webkit-transform: translateY(0); /* Safari 3-8 */
    transform: translateY(0);
    opacity: 1;
  }
  80% {
    -ms-transform: translateY(0); /* IE 9 */
    -webkit-transform: translateY(0); /* Safari 3-8 */
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    -ms-transform: translateY(0); /* IE 9 */
    -webkit-transform: translateY(0); /* Safari 3-8 */
    transform: translateY(0);
    opacity: 0;
  }
}

/* Standard syntax */
@keyframes slideInFromBottomMulti {
  0% {
    -ms-transform: translateY(50px); /* IE 9 */
    -webkit-transform: translateY(50px); /* Safari 3-8 */
    transform: translateY(50px);
    opacity: 0;
  }
  50% {
    -ms-transform: translateY(0); /* IE 9 */
    -webkit-transform: translateY(0); /* Safari 3-8 */
    transform: translateY(0);
    opacity: 1;
  }
  80% {
    -ms-transform: translateY(0); /* IE 9 */
    -webkit-transform: translateY(0); /* Safari 3-8 */
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    -ms-transform: translateY(0); /* IE 9 */
    -webkit-transform: translateY(0); /* Safari 3-8 */
    transform: translateY(0);
    opacity: 0;
  }
}

#showcase-multi p{
  margin: 5px 0;
  opacity: 0;
}

#showcase-multi{
  width: 500px;
  height: 150px;
  padding: 1.7rem;
  background-color: #CC0000;
  color: #fff;
  font-size: 2em;
}
#showcase-multi #first-row{
  -webkit-animation: slideInFromBottomMulti 2s ease-out 0s infinite; /* Safari 4.0 - 8.0 */
  animation: slideInFromBottomMulti 2s ease-out 0s infinite;
}
#showcase-multi #second-row{
  -webkit-animation: slideInFromBottomMulti 2s ease-out 0.15s infinite; /* Safari 4.0 - 8.0 */
  animation: slideInFromBottomMulti 2s ease-out 0.15s infinite;
}
#showcase-multi #third-row{
  -webkit-animation: slideInFromBottomMulti 2s ease-out 0.3s infinite; /* Safari 4.0 - 8.0 */
  animation: slideInFromBottomMulti 2s ease-out 0.3s infinite;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div id="showcase-multi"&gt;
      &lt;p id="first-row"&gt;First row&lt;/p&gt;
      &lt;p id="second-row"&gt;Second row&lt;/p&gt;
      &lt;p id="third-row"&gt;Third row&lt;/p&gt;
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>Notice on on the following animated gif, the text fades in and up... also notice how that each line of text has a slight delay to the line above...</p>

<p>How can this effect be done with CSS?</p>

<p>Thanks</p>

<p><a href="https://i.stack.imgur.com/TMdnC.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TMdnC.gif" alt="enter image description here"></a></p>


How to make multilines of text fade in and up and a different rate per line?

请注意，在下面的动画gif中，文本淡入淡出...还要注意，每一行文本对上面的行都有轻微的延迟...如何使用CSS实现此效果？谢谢​​

问如何使多行文本淡入淡出，并使每行有不同的淡入淡出速率？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使多行文本淡入淡出，并使每行有不同的淡入淡出速率？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使多行文本淡入淡出，并使每行有不同的淡入淡出速率？
EN