How to flicker multiple sets of text one after another

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>

1 Answer
1

I have translated your question in following requirements:

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.

animation-delay

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).

display: inline;

display: none;

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>

animation-duration: 0.1s;

animation-iteration-count: 10;

animation-delay: 1s;

animation-delay: 2s;

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.