Перемещение 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. По какой-то причине размещение абзаца на 100% от div не похоже на его «дно» 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>