Animazione CSS: serve per fermarsi all'ultimo fotogramma/parola

Question

Ho aggiunto testo rotante con animazione CSS. Voglio che l'animazione superi 1 ciclo e si blocchi sull'ultimo fotogramma. Con il mio codice corrente, l'animazione fa un ciclo e termina su una cornice vuota. Qualche suggerimento su come correggere questo?

body {} .rw-wrapper { 
 
     width: 80%; 
 
     position: relative; 
 
     margin: 110px auto 0 auto; 
 
     font-family: 'Bree Serif'; 
 
     padding: 10px; 
 
    } 
 
    .rw-sentence { 
 
     margin: 0; 
 
     text-align: left; 
 
     text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); 
 
    } 
 
    .rw-sentence span { 
 
     color: #444; 
 
     font-size: 200%; 
 
     font-weight: normal; 
 
    } 
 
    .rw-words { 
 
     display: inline; 
 
     text-indent: 10px; 
 
    } 
 
    .rw-words-1 span { 
 
     position: absolute; 
 
     opacity: 0; 
 
     overflow: hidden; 
 
     color: #6b969d; 
 
     -webkit-animation: rotateWord 8s 1 forwards; 
 
     -ms-animation: rotateWord 8s 1 forwards; 
 
     animation: rotateWord 8s 1 forwards; 
 
    } 
 
    .rw-words-1 span:nth-child(2) { 
 
     -webkit-animation-delay: 2s; 
 
     -ms-animation-delay: 2s; 
 
     animation-delay: 2s; 
 
     color: #6b889d; 
 
    } 
 
    .rw-words-1 span:nth-child(3) { 
 
     -webkit-animation-delay: 4s; 
 
     -ms-animation-delay: 4s; 
 
     animation-delay: 4s; 
 
     color: #6b739d; 
 
    } 
 
    .rw-words-1 span:nth-child(4) { 
 
     -webkit-animation-delay: 6s; 
 
     -ms-animation-delay: 6s; 
 
     animation-delay: 6s; 
 
     color: #7a6b9d; 
 
    } 
 
    @-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; 
 
     } 
 
    } 
 
    @-ms-keyframes rotateWord { 
 
     0% { 
 
     opacity: 0; 
 
     } 
 
     2% { 
 
     opacity: 0; 
 
     -ms-transform: translateY(-30px); 
 
     } 
 
     5% { 
 
     opacity: 1; 
 
     -ms-transform: translateY(0px); 
 
     } 
 
     17% { 
 
     opacity: 1; 
 
     -ms-transform: translateY(0px); 
 
     } 
 
     20% { 
 
     opacity: 0; 
 
     -ms-transform: translateY(30px); 
 
     } 
 
     80% { 
 
     opacity: 0; 
 
     } 
 
     100% { 
 
     opacity: 0; 
 
     } 
 
    } 
 
    @keyframes rotateWord { 
 
     0% { 
 
     opacity: 0; 
 
     } 
 
     2% { 
 
     opacity: 0; 
 
     -webkit-transform: translateY(-30px); 
 
     transform: translateY(-30px); 
 
     } 
 
     5% { 
 
     opacity: 1; 
 
     -webkit-transform: translateY(0px); 
 
     transform: translateY(0px); 
 
     } 
 
     17% { 
 
     opacity: 1; 
 
     -webkit-transform: translateY(0px); 
 
     transform: translateY(0px); 
 
     } 
 
     20% { 
 
     opacity: 0; 
 
     -webkit-transform: translateY(30px); 
 
     transform: translateY(30px); 
 
     } 
 
     80% { 
 
     opacity: 0; 
 
     } 
 
     100% { 
 
     opacity: 0; 
 
     } 
 
    } 
 
    @media screen and (max-width: 768px) { 
 
     .rw-sentence { 
 
     font-size: 18px; 
 
     } 
 
    } 
 
    @media screen and (max-width: 320px) { 
 
     .rw-sentence { 
 
     font-size: 9px; 
 
     } 
 
    }

<section class="rw-wrapper"> 
 
    <h2 class="rw-sentence"> 
 
\t \t  <span>Test</span> 
 
\t \t  <div class="rw-words rw-words-1"> 
 
\t \t \t  <span>one</span> 
 
\t \t \t  <span>two</span> 
 
\t \t \t  <span>three</span> 
 
\t \t \t  <span>four</span> 
 
\t \t  </div> 
 
\t  </h2> 
 
</section>

Answer 1

È keyframe al 100% ha un'opacità pari a zero. Puoi scrivere un'animazione separata per l'ultima opera e usarla.

come questo (non ho aggiunto fotogrammi chiave specifici del produttore, solo @keyframes rotateLastWord, ma è possibile aggiungere come pure):

body {} .rw-wrapper { 
 
     width: 80%; 
 
     position: relative; 
 
     margin: 110px auto 0 auto; 
 
     font-family: 'Bree Serif'; 
 
     padding: 10px; 
 
    } 
 
    .rw-sentence { 
 
     margin: 0; 
 
     text-align: left; 
 
     text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); 
 
    } 
 
    .rw-sentence span { 
 
     color: #444; 
 
     font-size: 200%; 
 
     font-weight: normal; 
 
    } 
 
    .rw-words { 
 
     display: inline; 
 
     text-indent: 10px; 
 
    } 
 
    .rw-words-1 span { 
 
     position: absolute; 
 
     opacity: 0; 
 
     overflow: hidden; 
 
     color: #6b969d; 
 
     -webkit-animation: rotateWord 8s 1 forwards; 
 
     -ms-animation: rotateWord 8s 1 forwards; 
 
     animation: rotateWord 8s 1 forwards; 
 
    } 
 
    .rw-words-1 span:nth-child(2) { 
 
     -webkit-animation-delay: 2s; 
 
     -ms-animation-delay: 2s; 
 
     animation-delay: 2s; 
 
     color: #6b889d; 
 
    } 
 
    .rw-words-1 span:nth-child(3) { 
 
     -webkit-animation-delay: 4s; 
 
     -ms-animation-delay: 4s; 
 
     animation-delay: 4s; 
 
     color: #6b739d; 
 
    } 
 
    
 
    @-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; 
 
     } 
 
    } 
 
    @-ms-keyframes rotateWord { 
 
     0% { 
 
     opacity: 0; 
 
     } 
 
     2% { 
 
     opacity: 0; 
 
     -ms-transform: translateY(-30px); 
 
     } 
 
     5% { 
 
     opacity: 1; 
 
     -ms-transform: translateY(0px); 
 
     } 
 
     17% { 
 
     opacity: 1; 
 
     -ms-transform: translateY(0px); 
 
     } 
 
     20% { 
 
     opacity: 0; 
 
     -ms-transform: translateY(30px); 
 
     } 
 
     80% { 
 
     opacity: 0; 
 
     } 
 
     100% { 
 
     opacity: 0; 
 
     } 
 
    } 
 
    @keyframes rotateWord { 
 
     0% { 
 
     opacity: 0; 
 
     } 
 
     2% { 
 
     opacity: 0; 
 
     -webkit-transform: translateY(-30px); 
 
     transform: translateY(-30px); 
 
     } 
 
     5% { 
 
     opacity: 1; 
 
     -webkit-transform: translateY(0px); 
 
     transform: translateY(0px); 
 
     } 
 
     17% { 
 
     opacity: 1; 
 
     -webkit-transform: translateY(0px); 
 
     transform: translateY(0px); 
 
     } 
 
     20% { 
 
     opacity: 0; 
 
     -webkit-transform: translateY(30px); 
 
     transform: translateY(30px); 
 
     } 
 
     80% { 
 
     opacity: 0; 
 
     } 
 
     100% { 
 
     opacity: 0; 
 
     } 
 
    } 
 
    @media screen and (max-width: 768px) { 
 
     .rw-sentence { 
 
     font-size: 18px; 
 
     } 
 
    } 
 
    @media screen and (max-width: 320px) { 
 
     .rw-sentence { 
 
     font-size: 9px; 
 
     } 
 
    } 
 

 
/* stuff below added by Shomz */ 
 

 
.rw-words-1 span#last { 
 
     -webkit-animation: rotateLastWord 8s 1 forwards 6s; 
 
     -ms-animation: rotateLastWord 8s 1 forwards 6s; 
 
     animation: rotateLastWord 8s 1 forwards 6s; 
 
    } 
 

 
@keyframes rotateLastWord { 
 
     0% { 
 
     opacity: 0; 
 
     } 
 
     2% { 
 
     opacity: 0; 
 
     -webkit-transform: translateY(-30px); 
 
     transform: translateY(-30px); 
 
     } 
 
     5% { 
 
     opacity: 1; 
 
     -webkit-transform: translateY(0px); 
 
     transform: translateY(0px); 
 
     } 
 
     17% { 
 
     opacity: 1; 
 
     -webkit-transform: translateY(0px); 
 
     transform: translateY(0px); 
 
     } 
 
     100% {opacity: 1} 
 
    }

<section class="rw-wrapper"> 
 
    <h2 class="rw-sentence"> 
 
\t \t  <span>Test</span> 
 
\t \t  <div class="rw-words rw-words-1"> 
 
\t \t \t  <span>one</span> 
 
\t \t \t  <span>two</span> 
 
\t \t \t  <span>three</span> 
 
\t \t \t  <span id="last">four</span> 
 
\t \t  </div> 
 
\t  </h2> 
 
</section>