Search code examples
htmlcsscss-animationsanimatedcrossfade

Cross fade animation items all begin on top of the other

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;    }

Example of text beginning on top of the other

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>

Solution

  • 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>