Question

我正在尝试使用CSS3创建一个动画，它将显示一个项目列表。

我已经能够创建一个循环遍历列表中每个项目的动画，但是，我无法找到一个解决方案，让动画结束显示列表中的最后一项。

基本上，我希望动画以“ Johnney be good ”字样结束。

据说这可以在Stopping a CSS3 Animation on last frame

中被问及并回答

但是，我无法弄清楚该解决方案是否或如何应用于我的问题。感谢您的帮助，非常感谢。

#sentence-wrapper{
    width: 80%;
    position: relative;
    margin: 110px auto 0 auto;
    font-family: serif;
    padding: 10px;
}
.sentence{
    margin: 0;
    text-align: left;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.sentence span{
    color: #444;
    font-size: 200%;
    font-weight: normal;
}
.words{
    display: inline;
    text-indent: 10px;
}
.words-1 span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    color: #6b969d;
    -webkit-animation: rotateWord 12s 1 0s;
    -moz-animation: rotateWord 12s 1 0s;
    -o-animation: rotateWord 12s 1 0s;
    -ms-animation: rotateWord 12s 1 0s;
    animation: rotateWord 12s 1 0s;
}
.words-1 span:nth-child(2) { 
    -webkit-animation-delay: 3s; 
    -moz-animation-delay: 3s; 
    -o-animation-delay: 3s; 
    -ms-animation-delay: 3s; 
    animation-delay: 3s; 
    color: #6b969d;
}
.words-1 span:nth-child(3) { 
    -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    -o-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
    animation-delay: 6s; 
    color: #6b969d;    
}
.words-1 span:nth-child(4) { 
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s; 
    -o-animation-delay: 9s; 
    -ms-animation-delay: 9s; 
    animation-delay: 9s; 
    color: #6b969d;
}
@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
    5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
    20% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

<div id="sentence-wrapper">
                <div class="sentence">
                    <span>Johnney </span>
                    <div class="words words-1">
                        <span><em>smart</em></span>
                        <span><em>clever</em></span>
                        <span><em>awesome</em></span>
                         <span>be good</span>
                    </div>
                 
                  </div>
             
            </div>

Answer 1

好的＆＃34; <span>使用与其他rotateWord相同的动画（<span>）。以opacity: 0;结尾。如果你不想要＆＃34;做好事＆＃34;淡入后淡出，你应该为它定义一个单独的动画：

@keframes rotateWordFinal{
  0% { opacity: 0; }
  50% { opacity: 0; -webkit-transform: translateY(-30px); }
  100% { opacity: 1; -webkit-transform: translateY(0px);}
}

.words-1 span:nth-child(4){
  animation: rotateWordFinal 6s 1 9s;
}

另外：您为动画属性使用了所有类型的前缀，但不是实际的@keyframes。最好保持这种一致性。

Answer 2

您需要为上一个span创建单独的动画。

#sentence-wrapper{
  font-family:serif;
  margin:110px auto 0 auto;
  padding:10px;
  position:relative;
  width:80%;
}
.sentence{
  margin:0;
  text-align:left;
  text-shadow:1px 1px 1px rgba(255, 255, 255, 0.8);
}
.sentence span{
  color:#444;
  font-size:200%;
  font-weight:normal;
}
.words{
  display:inline;
  text-indent:10px;
}
.words-1 span{
  animation:rotateWord 12s 1 0s;
  color:#6b969d;
  opacity:0;
  overflow:hidden;
  position:absolute;
}
.words-1 span:nth-child(2){
  animation-delay:3s;
}
.words-1 span:nth-child(3){
  animation-delay:6s;
}
.words-1 span:last-child{
  animation-delay: 9s;
  animation-fill-mode: forwards;
  animation-name:rotateLast;
}
@keyframes rotateWord{
  0%,80%,100%{
    opacity:0;
  }
  2% {
    opacity:0;
    transform:translateY(-30px);
  }
  5%,17%{
    opacity:1;
    transform: translateY(0px);
  }
  20%{
    opacity:0;
    transform:translateY(30px);
  }
}
@keyframes rotateLast{
  0%{
    opacity:0;
  }
  2%{
    opacity:0;
    transform:translateY(-30px);
  }
  5%,100%{
    opacity:1;
    transform:translateY(0px);
  }
}

<div id="sentence-wrapper">
  <div class="sentence">
    <span>Johnney </span>
    <div class="words words-1">
      <span><em>smart</em></span>
      <span><em>clever</em></span>
      <span><em>awesome</em></span>
      <span>be good</span>
    </div>
  </div>
</div>

Answer 3

我差不多用animation-fill-mode并将100%动画opacity更改为1。

#sentence-wrapper {
  width: 80%;
  position: relative;
  margin: 110px auto 0 auto;
  font-family: serif;
  padding: 10px;
}

.sentence {
  margin: 0;
  text-align: left;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

.sentence span {
  color: #444;
  font-size: 200%;
  font-weight: normal;
}

.words {
  display: inline;
  text-indent: 10px;
}

.words-1 span {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  color: #6b969d;
  -webkit-animation: rotateWord 12s 1 0s;
  -moz-animation: rotateWord 12s 1 0s;
  -o-animation: rotateWord 12s 1 0s;
  -ms-animation: rotateWord 12s 1 0s;
  animation: rotateWord 12s 1 0s linear backwards; /* all animations end at 0% value */
}

.words-1 span:nth-child(2) {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
  color: #6b969d;
}

.words-1 span:nth-child(3) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
  color: #6b969d;
}

.words-1 span:nth-child(4) {
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -o-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
  animation-fill-mode: forwards; /* This animation ends on 100% value */
  color: #6b969d;
  opacity: 0;
}

@-webkit-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1; /* Changed from 0 to 1 */
  }
}

<div id="sentence-wrapper">
  <div class="sentence">
    <span>Johnney </span>
    <div class="words words-1">
      <span><em>smart</em></span>
      <span><em>clever</em></span>
      <span><em>awesome</em></span>
      <span>be good</span>
    </div>

  </div>

</div>

让CSS动画显示列表中的最后一项

3 个答案: