如何解决CSS交叉淡入淡出动画页面加载时元素重叠问题？

我用以下代码实现多个元素的交叉淡入淡出动画，每个xfader_*类对应列表中的元素。动画运行正常，但页面首次加载时所有元素重叠显示，几秒后才恢复正常。请问怎么设置才能让页面初始状态只显示一个元素？

现有CSS代码： #

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

动画应用示例HTML： #

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

解决方案： #

问题出在页面加载时，动画还未开始执行（或浏览器渲染动画有短暂延迟），除了xfader_0设置了opacity:1，其他元素的默认opacity为1（浏览器默认样式），所以会全部显示导致重叠。只需给非初始显示的元素设置初始透明即可：

修改后的CSS代码（基础版）：

@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;
    opacity: 0;
}
.xfader_2 {
    animation: xfade 48s linear 32s infinite;
    opacity: 0;
}

更简洁的写法（批量设置版）：

@keyframes xfade {
    0% { opacity: 1; }
    31.25% { opacity: 1; }
    33.33333% { opacity: 0; }
    97.91666% { opacity: 0; }
    100% { opacity: 1; }
}

/* 所有xfader元素初始透明，统一绑定动画 */
[class^="xfader_"] {
    animation: xfade 48s linear infinite;
    opacity: 0;
}

/* 单独设置第一个元素初始可见，以及各元素的动画延迟 */
.xfader_0 {
    opacity: 1;
    animation-delay: 0s;
}
.xfader_1 {
    animation-delay: 16s;
}
.xfader_2 {
    animation-delay: 32s;
}

这样页面加载时，只有xfader_0元素是可见的，其他元素初始透明，动画会在对应的延迟时间点自动切换元素的显示状态，完全不影响后续的交叉淡入淡出循环效果。

内容的提问来源于stack exchange，提问作者callumg46