html - 具有 6 个元素的简单文本轮播

Question

我正在寻找一个包含 6 个元素的简单文本轮播。主要思想是一个文本显示，然后它消失并出现第二个等，然后是第三个等......我有 4 个元素的工作代码，但无法让它与 6 个元素一起使用。如果有人可以提供帮助，我将不胜感激。这是4个元素的代码：

/* For 4 texts */
.textcarousel, .textcarousel2, .textcarousel3, .textcarousel4{
    pointer-events: none;
    opacity: 0;
}
.textcarousel{
    -webkit-animation: tcarousel 20s ease infinite;
            animation: tcarousel 20s ease infinite;
}
.textcarousel2{
    -webkit-animation: tcarousel 20s ease -5s infinite;
            animation: tcarousel 20s ease -5s infinite;
}
.textcarousel3{
    -webkit-animation: tcarousel 20s ease 5s infinite;
            animation: tcarousel 20s ease 5s infinite;
}
.textcarousel4{
    -webkit-animation: tcarousel 20s ease 10s infinite;
            animation: tcarousel 20s ease 10s infinite;
}
@-webkit-keyframes tcarousel{
    0%{
        opacity: 0;
        -webkit-transform: translateX(30px);
                transform: translateX(30px);
        pointer-events: none;
    }
    6%{
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
        pointer-events: all;
    }
    24%{
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
        pointer-events: all;
    }
    30%{
        opacity: 0;
        -webkit-transform: translateX(-30px);
                transform: translateX(-30px);
        pointer-events: none;
    }
    100%{
        opacity: 0;
        pointer-events: none;
    }
}
@keyframes tcarousel{
    0%{
        opacity: 0;
        -webkit-transform: translateX(30px);
                transform: translateX(30px);
        pointer-events: none;
    }
    6%{
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
        pointer-events: all;
    }
    24%{
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
        pointer-events: all;
    }
    30%{
        opacity: 0;
        -webkit-transform: translateX(-30px);
                transform: translateX(-30px);
        pointer-events: none;
    }
    100%{
        opacity: 0;
        pointer-events: none;
    }
}

标签： htmlcss