CSS animation overlapping div - html

Question

I'm trying to animate a scrolling text (in a paragraph) so that it will move from the bottom to the top of a div, scroll out of the div (become invisible) and then loop. Here is the relevant 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;
}
And the html code:
<div class="infobar">
<p>
Infobar test
<p>
</div>
I'm having two issues:
The text overlaps the rest of the document. How can I make the paragraph invisible as it hits the edge of its parent div? This effect is what I'm looking for: http://media02.hongkiat.com/marquee-css3-animation//demo/index2.html
For some reason, placing the paragraph at 100% of the div doesn't seem to put it on the "bottom" of the div (I've currently placed it at 600%). Why is this?
Any input is appreciated. Here is my JSfiddle: https://jsfiddle.net/essi/oqh6ok00/1/

Answer 1

Add overflow: hidden; to class .infobar. In this way the overflow is clipped, and your animated element will be visible within edges similarly to what you have shown us in your link example.
#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>