CSS Animation: Need It To Stop On Last Frame/Word - css

Question

I've added rotating text w/ CSS animation. I want the animation to go through 1 cycle and freeze on the last frame. With my current code, the animation does one cycle and ends on a blank frame. Any suggestions on how to correct 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

You keyframe at 100% has opacity zero. You can write a separate animation for the last work and use that instead.
Like this (I didn't add vendor-specific keyframes, just #keyframes rotateLastWord, but you can add them as well):
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>