Having CSS animation display last item in a list - css

Question

I am trying to create an animation using CSS3 only which will display a list of items.
I've been able to create an animation that cycles through each item on the list, however, I cannot figure out a solution to having the animation end with the last item on the list displayed.
Essentially, I want the animation to end with the words "Johnney be good" displayed.
This has supposedly been asked and answered in: Stopping a CSS3 Animation on last frame
However, I cannot figure out if or how that solution can be applied to my problem. Thank for your help, it's very appreciated.
#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

The "be good" <span> uses the same animation (rotateWord) as the other <span>s. Which ends with opacity: 0;. If you don't want "be good" to fade out after fading in, you should define a separate animation for it:
#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;
}
Also: you're using all kind of prefixes for the animation properties, but not for the actual #keyframes. Better to keep that consistent.

Answer 2

You'll need to create a separate animation for the last 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 3

I've almost got it with animation-fill-mode and changing the 100% animation opacity to 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>