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

Answer 2

全力以赴position: relative;

.usp-line li {
    position: relative;
    width: 100%;
    opacity: 0;
    transition: opacity .7s;
}

并尝试从line-height删除.usp-line属性

<li>元素所需的css动画循环

2 个答案: