How to flicker multiple sets of text one after another - html

Question

I am mimicking the Windows 10 start up screen. For those of you familiar with the startup, I have the color transitions complete and one set of flickering text ("Hello!"). But I have no idea how to add new sets of text that will flicker following the ("Hello!") Text.
I've tried to research this but have had no success
The final question is how to flicker multiple sets of text one after another
.wrapper {
height: 100%;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient(124deg, #0095f0, #e81d1d, #0095f0, #0095f0, #1de840, #ff0000, #f0f0f0, #dd00f3, #009900);
background-size: 1800% 1800%;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 25s ease infinite;
-o-animation: rainbow 25s ease infinite;
animation: rainbow 25s ease infinite;
}
#-webkit-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#-moz-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#-o-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#Message {
color: #ffffff;
margin-top: 250px;
}
#keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate-flicker {
-webkit-animation: flickerAnimation 10s infinite;
-moz-animation: flickerAnimation 10s infinite;
-o-animation: flickerAnimation 10s infinite;
animation: flickerAnimation 10s infinite;
color: #ffffff;
margin-top: 250px;
}
#greet {
font-family: roboto;
font-weight: 150;
font-size: 30px;
}
<div class="wrapper">
<div class="animate-flicker" align="center">
<p id="greet">Hello!</h2>
</div>
</div>

Answer 1

I have translated your question in following requirements:
Show several words consecutively at the same spot.
Apply an animation on each word.
My animation displays an element 10 times for a short period of time and hides it again. animation-delay ensures that the animation on the second word starts after the first animation has finished and the animation on the third word starts after the second animation has finished.
To center words I positioned them absolute. This was necessary because I could not integrate display: inline; or display: none; in the keyframe animation (property display is not animatable).
span {
animation-name: flickerAnimation;
animation-duration: 0.1s;
animation-iteration-count: 10;
position: absolute;
opacity: 0;
left: 0;
right: 0;
text-align: center;
}
span:nth-child(2) {
animation-delay: 1s;
}
span:nth-child(3) {
animation-delay: 2s;
}
#keyframes flickerAnimation {
0% {opacity: 1;}
80% {opacity: 1;}
81% {opacity: 0;}
100% {opacity: 0;}
}
<div class="wrapper">
<span>First</span>
<span>Second</span>
<span>Third</span>
</div>