纯CSS @keyframes多元素循环淡入淡出动画失效排查

预期效果 #

三个轮播元素以15秒为周期无限循环淡入淡出，各节点透明度要求：

• 元素1：动画进度0%时opacity: 0，33%时opacity: 1，66%、100%时回到opacity: 0，剩余时长保持透明
• 元素2：动画进度0%、33%时opacity: 0，66%时淡入至opacity: 1，后续平滑淡出为透明
• 元素3：动画前10秒保持opacity: 0，周期末尾淡入至opacity: 1

现有代码故障点 #

• 语法闭合缺失：第三个li元素的样式规则、多个@keyframes规则（含webkit前缀版本）未写闭合花括号}，导致后续CSS规则全部解析失效
• 关键帧命名错误：多处关键帧名称中加入了非法空格（如fade-animation 1），和元素上绑定的动画名fade-animation-1等不匹配，浏览器无法关联对应动画规则
• 关键帧进度不符合需求：元素1的淡出节点写在65%位置，和要求的66%不符；元素2、3缺少平滑淡出的过渡关键帧，会出现透明度跳变
• 部分CSS属性末尾缺失分号，存在解析容错风险

修正后可运行代码 #

CSS代码 #

.testimonial-slider {
   display: block;
   width: 50%;
   height: auto;
   margin-top: 100px;
}

.testimonial-slider ul.slider {
   display: block;
   list-style: none;
   padding: 0;
   position: relative;
   display: inline-block;
   width: 100%;
   height: 500px;
   overflow: hidden;
   margin: 0 auto;
}

.testimonial-slider ul.slider li {
    position: absolute;
    display: block;
    width: 100%;
    opacity: 0;
    margin: 0 auto;
}
.testimonial-slider ul.slider li:nth-child(1) {
    -webkit-animation: fade-animation-1 15s infinite;
            animation: fade-animation-1 15s infinite;
}
.testimonial-slider ul.slider li:nth-child(2) {
    -webkit-animation: fade-animation-2 15s infinite;
            animation: fade-animation-2 15s infinite;
}

.testimonial-slider ul.slider li:nth-child(3) {
    -webkit-animation: fade-animation-3 15s infinite;
            animation: fade-animation-3 15s infinite;
}

.testimonial-slider q {
   display: inline-block;
   font: normal 30px Helvetica, Arial, Verdana, sans-serif;
   letter-spacing: .5pt;
   text-shadow: 0 5px 10px rgba(0,0,0,.1);
}

.testimonial-slider .source {
    margin-top: 25px;
    color: #fff;
    font: italic 20px Helvetica, Arial, Verdana, sans-serif;
}

/* 标准语法关键帧 */
@keyframes fade-animation-1 {
    0% {opacity: 0;}
    33% {opacity: 1;}
    66% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes fade-animation-2 {
    0% {opacity: 0;}
    33% {opacity: 0;}
    66% {opacity: 1;}
    99% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes fade-animation-3 {
    0% {opacity: 0;}
    66% {opacity: 0;}
    99% {opacity: 1;}
    100% {opacity: 1;}
}

/* webkit兼容前缀关键帧 */
@-webkit-keyframes fade-animation-1 {
    0% {opacity: 0;}
    33% {opacity: 1;}
    66% {opacity: 0;}
    100% {opacity: 0;}
}

@-webkit-keyframes fade-animation-2 {
    0% {opacity: 0;}
    33% {opacity: 0;}
    66% {opacity: 1;}
    99% {opacity: 0;}
    100% {opacity: 0;}
}

@-webkit-keyframes fade-animation-3 {
    0% {opacity: 0;}
    66% {opacity: 0;}
    99% {opacity: 1;}
    100% {opacity: 1;}
}

HTML代码 #

<div class="testimonial-slider" style="padding:5px;">
    <ul class="slider">
        <li>
            <div class="testimonial-slider-content"> 
                <q>Such a great testimonial goes here!!! Yay!!!.</q>
                <p class="source">- Chair</p>
            </div>
        </li>
        <li>
            <div class="testimonial-slider-content"> 
                <q>Testimonial 2 content oh yay great testimonial</q>
                <p class="source">- Head of Investor Relations</p>
            </div>
        </li>
        <li>
            <div class="testimonial-slider-content"> 
                <q>Testimonial content here</q>
                <p class="source">- CEO/Founder</p>
            </div>
        </li>
    </ul>
</div>

注：元素3的关键帧将100%节点透明度设为1，是为了循环衔接时不会出现末尾闪跳，动画重新从0%开始时会自然从1过渡到0，符合15秒周期的循环逻辑。

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