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>