Query about CSS text animation - css

Question

I cannot figure out how to add a static word after this CSS text animation. Can someone please explain how to add a static word after this text animation? I would like to add the word 'Teams' after the animation. when I try to add the word it overlaps with the spans because it was positioned absolute.
I couldn't figure out how to do it.
<text-block class="sentence">For Modern
<div class="verticalFlip">
<span>Engineering</span>
<span>Manufacturing</span>
<span>Quality</span>
<span>Service</span>
</div>
<text-block/>
<Style>
.sentence {
text-align: left;
}
.verticalFlip {
display: inline;
text-indent: 3px;
}
.verticalFlip span {
animation: vertical 10s linear infinite 0s;
-ms-animation: vertical 10s linear infinite 0s;
-webkit-animation: vertical 10s linear infinite 0s;
opacity: 0;
position: absolute;
overflow: hidden;
height : 40px
}
.verticalFlip span:nth-child(2) {
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.verticalFlip span:nth-child(3) {
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.verticalFlip span:nth-child(4) {
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
/*Vertical Flip Animation*/
#-moz-keyframes vertical {
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: rotateX(180deg); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0;}
}
#-webkit-keyframes vertical {
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: rotateX(180deg); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes vertical {
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: rotateX(180deg); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
</style>

Answer 1

I used a little trick to just use css without javascript.
.sentence {
text-align: left;
}
.verticalFlip {
display: inline;
font-size: 0;
}
.verticalFlip>span {
position: relative;
display: inline-block;
width: 0;
color: transparent;
font-size: 1rem;
animation: fakeWidth 10s linear infinite 0s;
-ms-animation: fakeWidth 10s linear infinite 0s;
-webkit-animation: fakeWidth 10s linear infinite 0s;
}
.verticalFlip>span:nth-child(2) {
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.verticalFlip>span:nth-child(3) {
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.verticalFlip>span:nth-child(4) {
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.verticalFlip>div {
display: inline-block;
font-size: 1rem;
text-indent: 5px;
}
.verticalFlip>span>span {
position: absolute;
left: 0;
top: 0;
height: 40px;
color: black;
opacity: 0;
z-index: 1;
animation: vertical 10s linear infinite 0s;
-ms-animation: vertical 10s linear infinite 0s;
-webkit-animation: vertical 10s linear infinite 0s;
}
.verticalFlip>span:nth-child(2)>span {
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.verticalFlip>span:nth-child(3)>span {
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.verticalFlip>span:nth-child(4)>span {
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
/*Vertical Flip Animation*/
#-moz-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-moz-transform: rotateX(180deg);
}
10% {
opacity: 1;
-moz-transform: translateY(0px);
}
25% {
opacity: 1;
-moz-transform: translateY(0px);
}
30% {
opacity: 0;
-moz-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-webkit-transform: rotateX(180deg);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
25% {
opacity: 1;
-webkit-transform: translateY(0px);
}
30% {
opacity: 0;
-webkit-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-ms-transform: rotateX(180deg);
}
10% {
opacity: 1;
-ms-transform: translateY(0px);
}
25% {
opacity: 1;
-ms-transform: translateY(0px);
}
30% {
opacity: 0;
-ms-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fakeWidth {
0% {
width: 0;
}
5% {
width: auto;
}
25% {
width: auto;
}
30% {
width: 0;
}
100% {
width: 0;
}
}
<text-block class="sentence">For Modern
<div class="verticalFlip">
<span>Engineering<span>Engineering</span></span>
<span>Manufacturing<span>Manufacturing</span></span>
<span>Quality<span>Quality</span></span>
<span>Service<span>Service</span></span>
<div>Teams</div>
</div>
</text-block>