Animacja CSS: potrzebna do zatrzymania na ostatniej klatce/słowie

Question

Dodałem obracanie tekstu z animacją CSS. Chcę, aby animacja przechodziła przez 1 cykl i zatrzymała się na ostatniej klatce. Przy obecnym kodzie animacja wykonuje jeden cykl i kończy na pustej ramce. Wszelkie sugestie, jak to poprawić?

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

Twoją klatkę kluczową w 100% krycie ma zerowy. Możesz napisać osobną animację do ostatniej pracy i użyć jej zamiast niej.

tak (nie dodawać klatek kluczowych specyficznych dla dostawcy, tylko @keyframes rotateLastWord, ale można je również dodać):

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>