html - <li> 元素需要 css 动画循环

Question

我终于设法在到达断点时停止列表模糊一秒钟，但我现在如何循环列表？目前它在最后一个要点之后结束。

@media screen and (max-width: 1023px) {

    li {
        position: absolute;
        top: 0;
        left: 0;
        width:100%;
        opacity: 0;


        animation: fadeOut 3s ease-out forwards ;



        -webkit-animation: fadeOut 3s ease-out forwards;
        animation: fadeOut 3s ease-out forwards ;





    }

    @-webkit-keyframes fadeOut {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @keyframes fadeOut {
        0% {
            opacity: 0;

        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    li:nth-child(1) {
        animation-delay: 0s;

    }

    li:nth-child(2) {
        animation-delay: 3s;
    }

    li:nth-child(3) {
        animation-delay: 6s;
    }

    li:nth-child(4) {
        animation-delay: 9s;
    }

}

理想情况下我不想使用 JS，所以我是否必须为每个 LI 的淡入/淡出设置一个关键帧事件？这是一个 JSFiddle - https://jsfiddle.net/1gvywmda/1/

Answer 1

我已经更新了答案:

https://jsfiddle.net/jwc9rem5/3/

@media screen and (max-width: 1023px) {  
    .usp-line li:first-child {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .usp-line li:not(:first-child) {
        opacity: 0;
        transition: opacity .7s;
    }
}