讓CSS動畫顯示列表中的最後一項

Question

我想用CSS3創建一個只顯示項目列表的動畫。

我已經能夠創建一個循環遍歷列表中的每個項目的動畫，但是，我無法弄清楚動畫以顯示的列表上的最後一個項目結束的解決方案。

本質上，我希望動畫以「約翰尼好」結尾顯示。

這理應被問和回答：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

您需要爲最後的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 2

的 「好」 <span>使用相同的動畫（rotateWord）作爲其他<span>秒。以opacity: 0;結尾。如果你不想「好」在褪色後淡出，你應該定義一個單獨的動畫吧：

@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 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>