CSS動畫重疊div

Question

我正在嘗試為滾動文本設置動畫（在段落中），以便它從div的底部移動到頂部，滾動div（變得不可見）然后循環。 這是相關的CSS：

@keyframes showAndScroll {
            0% {opacity: 0;}
            10% {opacity: 0.85;}
            50% {opacity: 0.85;}
            60% {opacity: 0;}
            100% {opacity: 0;}

        }

        .infobar {
            position: absolute;
            width: 100%;
            height: 30%;
            bottom: 0%;
            color: white;
            background-color: red;
            opacity: 0.75;
            text-indent: 30px;
            font-size: 200%;


            pointer-events: none;

            animation-name: showAndScroll;
            animation-duration: 40s;
            animation-iteration-count: infinite;
        }

        @keyframes scroll {
            0% {
                transform: translateY(600%); color: red;
                }
            50% {
                transform: translateY(-200%); color: blue;
                }
        }

        .infobar p {
            position: absolute;
            width: 100%;
            overflow: hidden;
            display: inline-block;
            animation-name: scroll;
            animation-duration: 40s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

和HTML代碼：

<div class="infobar">
        <p>
            Infobar test
        <p>
    </div>

我有兩個問題：

1. 該文本與文檔的其余部分重疊。 如何在段落到其父div的邊緣時使段落不可見？ 我正在尋找這個效果： http ： //media02.hongkiat.com/marquee-css3-animation//demo/index2.html

2. 出於某種原因，將段落放在div的100％處似乎並沒有把它放在div的“底部”（我目前把它放在600％）。 為什么是這樣？

任何輸入都表示贊賞。 這是我的JSfiddle： https ：//jsfiddle.net/essi/oqh6ok00/1/

Answer 1

添加overflow: hidden; 上課.infobar 。 通過這種方式，溢出被剪切，您的動畫元素將在邊緣中可見，類似於您在鏈接示例中顯示的內容。

 @keyframes showAndScroll { 0% { opacity: 0; } 10% { opacity: 0.85; } 50% { opacity: 0.85; } 60% { opacity: 0; } 100% { opacity: 0; } } .infobar { position: absolute; width: 100%; height: 30%; bottom: 0%; color: white; background-color: red; opacity: 0.75; text-indent: 30px; font-size: 200%; pointer-events: none; animation-name: showAndScroll; animation-duration: 40s; animation-iteration-count: infinite; overflow: hidden; } @keyframes scroll { 0% { transform: translateY(600%); color: red; } 50% { transform: translateY(-200%); color: blue; } } .infobar p { position: absolute; width: 100%; overflow: hidden; display: inline-block; animation-name: scroll; animation-duration: 40s; animation-iteration-count: infinite; animation-timing-function: linear; } 

 <div class="infobar"> <p> Infobar test <p> </div>