Все элементы анимации перекрестного затухания начинаются поверх других.

Question

У меня есть приведенный ниже код для выполнения перекрестного затухания между несколькими элементами. Затем каждый xfader_ применяется как класс к соответствующему элементу в списке. Этот код работает хорошо, за исключением случаев, когда страница загружается впервые и все элементы начинаются друг над другом. Через несколько секунд затухание работает правильно. Как я могу настроить его так, чтобы сначала отображался только один элемент?

      @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

Если я правильно понимаю ваше требование, вам просто нужно добавить начальную «непрозрачность: 0» ко всем элементам xfader_, возможно, используя общий селектор. Здесь я попытался реализовать что-то подобное. Я добавил несколько дополнительных правил CSS для демонстрации, но важным свойством здесь являетсядляселектор.