CSS animation: need to stop at the last frame / Word

Question

I added rotating text with CSS animations. I want the animation to go through 1 cycle and freeze on the last frame. With my current code, the animation does one loop and ends on an empty frame. Any suggestions on how to fix this?

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"> <span>Test</span> <div class="rw-words rw-words-1"> <span>one</span> <span>two</span> <span>three</span> <span>four</span> </div> </h2> </section> 

Answer 1

A keyframe with 100% has zero opacity. You can write a separate animation for your latest work and use it instead.

Like this (I did not add keyframes depending on the vendor, just @keyframes rotateLastWord , but you can also add them):

 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"> <span>Test</span> <div class="rw-words rw-words-1"> <span>one</span> <span>two</span> <span>three</span> <span id="last">four</span> </div> </h2> </section>