Prevent last css animation from hiding - html

Question

I have a CSS animation I found online to loop through a website headline, but at the moment, when the last headline appears, it also hides, meaning there is no headline visible at the end.
What I've spent the last hour trying to work out, is how can I have the css animation work like I do right now, except when the last headline appears, instead of sliding out and hiding, it just stays there...
Here is what I have:
.rw-sentence {
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.rw-sentence span {
font-size: 200%;
font-weight: normal;
}
.rw-words {
display: inline;
}
.rw-words-1 span {
position: absolute;
opacity: 0;
-webkit-animation: rotateWord 7.5s linear;
-ms-animation: rotateWord 7.5s linear;
animation: rotateWord 7.5s linear;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 4.5s;
-ms-animation-delay: 4.5s;
animation-delay: 4.5s;
}
.rw-words-1 span:nth-child(5) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.rw-words-1 span:nth-child(6) {
-webkit-animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
animation-delay: 7.5s;
}
#-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;
}
}
<span class="h2 homeTitle rw-words rw-words-1">
<span>First headline.</span>
<span>Second headline.</span>
<span>Third headline.</span>
<span>Fourth headline.</span>
<span>Fifth headline.</span>
<span>My final headline...</span>
</span>

Answer 1

try it i thinks it help full
.rw-sentence {
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.rw-sentence span {
font-size: 200%;
font-weight: normal;
}
.rw-words {
display: inline;
}
.rw-words-1 span:last-child {
-webkit-animation: rotateend 8s 1 forwards 6s;
-ms-animation: rotateend 8s 1 forwards 6s;
animation: rotateend 8s 1 forwards 6s;
}
#keyframes rotateend {
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}
}
.rw-words-1 span {
position: absolute;
opacity: 0;
-webkit-animation: rotateWord 7.5s linear;
-ms-animation: rotateWord 7.5s linear;
animation: rotateWord 7.5s linear;
-webkit-animation-fill-mode: forwards;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
-webkit-animation-fill-mode: forwards;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 4.5s;
-ms-animation-delay: 4.5s;
animation-delay: 4.5s;
-webkit-animation-fill-mode: forwards;
}
.rw-words-1 span:nth-child(5) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
-webkit-animation-fill-mode: forwards;
}
.rw-words-1 span:nth-child(6) {
-webkit-animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
animation-delay: 7.5s;
-webkit-animation-fill-mode: forwards;
}
#-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;
}
}
<span class="h2 homeTitle rw-words rw-words-1">
<span>First headline.</span>
<span>Second headline.</span>
<span>Third headline.</span>
<span>Fourth headline.</span>
<span>Fifth headline.</span>
<span>My final headline...</span>
</span>
i have add some css

Answer 2

You can create a new animation for the last span in the container like this:
.rw-words-1 span:not(:last-child) {
position: absolute;
opacity: 0;
-webkit-animation: rotateWord 7.5s linear;
-ms-animation: rotateWord 7.5s linear;
animation: rotateWord 7.5s linear;
}
.rw-words-1 span:last-child {
position: absolute;
-webkit-animation: showWord 8s linear;
-ms-animation: showWord 8s linear;
animation: showWord 8s linear;
}
and the keyframe animation something like this:
#keyframes showWord {
0% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
95% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
See a demo below - I guess you can take it forward from this point:
.rw-words {
display: inline;
}
.rw-words-1 span:not(:last-child) {
position: absolute;
opacity: 0;
-webkit-animation: rotateWord 7.5s linear;
-ms-animation: rotateWord 7.5s linear;
animation: rotateWord 7.5s linear;
}
.rw-words-1 span:last-child {
position: absolute;
-webkit-animation: showWord 8s linear;
-ms-animation: showWord 8s linear;
animation: showWord 8s linear;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 4.5s;
-ms-animation-delay: 4.5s;
animation-delay: 4.5s;
}
.rw-words-1 span:nth-child(5) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#-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;
}
}
#keyframes showWord {
0% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
95% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
<span class="h2 homeTitle rw-words rw-words-1">
<span>First headline.</span>
<span>Second headline.</span>
<span>Third headline.</span>
<span>Fourth headline.</span>
<span>Fifth headline.</span>
<span>My final headline...</span>
</span>