Cross fade animation items all begin on top of the other - html

Question

I have the below code to perform a cross fade between multiple items. Each xfader_ is then applied as a class to the relevant item in a list.
This code works well except when the page is first loaded and all items begin on top of the other. After a few seconds the fading works correctly.
How can I set it so only one item is displayed to begin with?
#keyframes xfade { 0% { opacity: 1; } 31.25% { opacity: 1; } 33.33333% { opacity: 0; } 97.91666% { opacity: 0; } 100% { opacity: 1; } }
.xfader_0 { animation: xfade 48s linear 0s infinite; opacity: 1; }
.xfader_1 { animation: xfade 48s linear 16s infinite; }
.xfader_2 { animation: xfade 48s linear 32s infinite; }
The animation is assigned as below:
<div id='p1r0rmks2Otr' class='cell rmks' style='top:0px;position:absolute;'>
<div id='p1r0rmks2' class='cell rmks p1r0rmks2animLeft'>
<div id='p1r0rmks2Inr' class='cell rmks xfader_2'>
ૈપોૂગેુદગલુદલૈગૂપૂપગેૂીોલેતોબૂપગેગેોૂાોેૂદિ્ગિલાા્</div>
</div>
</div>
<div id='p1r0rmks1Otr' class='cell rmks' style='top:0px;position:absolute;'>
<div id='p1r0rmks1' class='cell rmks p1r0rmks1animLeft'>
<div id='p1r0rmks1Inr' class='cell rmks xfader_1'>
Flight 5678 has been cancelled</div>
</div>
</div>
<div id='p1r0rmks0Otr' class='cell rmks' style='top:0px;position:absolute;'>
<div id='p1r0rmks0' class='cell rmks p1r0rmks0animLeft'>
<div id='p1r0rmks0Inr' class='cell rmks xfader_0'>
Departure Gate 1234 Out of Service</div>
</div>
</div>
</div>
#keyframes xfade { 0% { opacity: 1; } 31.25% { opacity: 1; } 33.33333% { opacity: 0; } 97.91666% { opacity: 0; } 100% { opacity: 1; } }
.xfader_0 { animation: xfade 48s linear 0s infinite; opacity: 1; }
.xfader_1 { animation: xfade 48s linear 16s infinite; }
.xfader_2 { animation: xfade 48s linear 32s infinite; }
<div id='p1r0rmks2Otr' class='cell rmks' style='top:0px;position:absolute;'>
<div id='p1r0rmks2' class='cell rmks p1r0rmks2animLeft'>
<div id='p1r0rmks2Inr' class='cell rmks xfader_2'>
ૈપોૂગેુદગલુદલૈગૂપૂપગેૂીોલેતોબૂપગેગેોૂાોેૂદિ્ગિલાા્</div>
</div>
</div>
<div id='p1r0rmks1Otr' class='cell rmks' style='top:0px;position:absolute;'>
<div id='p1r0rmks1' class='cell rmks p1r0rmks1animLeft'>
<div id='p1r0rmks1Inr' class='cell rmks xfader_1'>
Flight 5678 has been cancelled</div>
</div>
</div>
<div id='p1r0rmks0Otr' class='cell rmks' style='top:0px;position:absolute;'>
<div id='p1r0rmks0' class='cell rmks p1r0rmks0animLeft'>
<div id='p1r0rmks0Inr' class='cell rmks xfader_0'>
Departure Gate 1234 Out of Service</div>
</div>
</div>
</div>

Answer 1

If I understand your requirement correctly, you just need to add initial 'opacity: 0' to all xfader_ elements, may be using a common selector. Here I've tried to implement something similar. I added some additional CSS rules for demo, but the important property here is the opacity: 0 for the div selector.
#keyframes xfade { 0% { opacity: 1; } 31.25% { opacity: 1; } 33.33333% { opacity: 0; } 97.91666% { opacity: 0; } 100% { opacity: 1; } }
.xfader_0 { animation: xfade 12s linear 0s infinite; opacity: 1; }
.xfader_1 { animation: xfade 12s linear 4s infinite; }
.xfader_2 { animation: xfade 12s linear 8s infinite; }
/*Extra CSS for this demo*/
div {
opacity: 0;
position: absolute;
top: 0;
background-color: #aeaeae;
padding: 10px;
}
<div id="div_0" class="xfader_0">First message</div>
<div id="div_1" class="xfader_1">Second message</div>
<div id="div_2" class="xfader_2">Third message</div>