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>