Невозможно прокрутить второй пункт, используя анимацию в css

Question

Я попытался прокрутить второй пункт с помощью анимации, но не смог прокрутить. Я использовал p как встроенный блок, но он переопределяет данные. Я хочу прокрутить один пункт после второго и так далее. Я приложил следующий код.

.marquee {
            height: 50px;
            overflow: hidden;
            position: relative;
            background: #fefefe;
            color: #333;
            border: 1px solid #4a4a4a;
        }
        
        .marquee p {
            display: inline-block;
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 50px;
            text-align: center;
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            -moz-animation: scroll-left 2s linear infinite;
            -webkit-animation: scroll-left 2s linear infinite;
            animation: scroll-left 20s linear infinite;
        }
        
        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }

<div class="marquee">
        <p> 1Marquee in CSS </p> <p> 2Marquee in CSS </p> <p>3 Marquee in CSS </p>
    </div>

Не могли бы вы помочь мне решить проблему.

Answer 1

Похоже, вам лучше отдать абзацы их собственный контейнер и анимировать их.

Проблема в том, что как только вы дадите абзацам позицию абсолютной позиции, они все соберутся в по умолчанию вверху слева.

.marquee {
            height: 50px;
            overflow: hidden;
            position: relative;
            background: #fefefe;
            color: #333;
            border: 1px solid #4a4a4a;
        }
        
.marquee p {
    display: inline;
    margin: 0;
    line-height: 50px;
    text-align: center;    
}

.marquee__content{
    
            -moz-animation: scroll-left 2s linear infinite;
            -webkit-animation: scroll-left 2s linear infinite;
            animation: scroll-left 20s linear infinite;
}
        
        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }

<div class="marquee">
    <div class="marquee__content">
        <p> 1Marquee in CSS </p> <p> 2Marquee in CSS </p> <p>3 Marquee in CSS </p>
</div>
    </div>