Animation duration? - css

Question

I have a simple CSS marquee scrolling up across a screen, essentially using the code found here (JSFiddle):
https://jsfiddle.net/c8r5kc1L/1/
<style style="text/css">
.marquee-outer {
height: 100px;
overflow: hidden;
position: relative;
color: orange;
}
.marquee-inner {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateY(100%);
-webkit-transform:translateY(100%);
transform:translateY(100%);
/* Apply animation to this element */
-moz-animation: scroll-up 5s linear infinite;
-webkit-animation: scroll-up 5s linear infinite;
animation: scroll-up 5s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scroll-up {
0% { -moz-transform: translateY(100%); }
100% { -moz-transform: translateY(-100%); }
}
#-webkit-keyframes scroll-up {
0% { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(-100%); }
}
#keyframes scroll-up {
0% {
-moz-transform: translateY(100%); /* Browser bug fix */
-webkit-transform: translateY(100%); /* Browser bug fix */
transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%); /* Browser bug fix */
-webkit-transform: translateY(-100%); /* Browser bug fix */
transform: translateY(-100%);
}
}
</style>
<div class="marquee-outer">
<div class="marquee-inner">Text</div>
</div>
I am trying to enter several paragraphs worth of content into the actual scroll area, which means that the animation resets before I've gotten through all the content. If I increase the animation duration (say, to 100s), the animation slows down, and ends up going through the same (partial) amount to the information.
Is there a way to keep the speed of the scroll constant, but actually just increase the duration of the scroll prior to reset?

Answer 1

I found a solution, if you "sync" the -100% with the amount of paragraphs that you want (And uses <p> inside <div class="marquee-inner"> because it gives you more control in the scrolling animation):
100% {
transform: translateY(-100%);
}
So is you want to have 4 paragraphs do something like this:
100% {
transform: translateY(-400%);
}
And also don't use line-height: 50px; in .marquee-inner instead use margin-bottom:
.marquee-inner p{
margin-bottom: 30px;
}
Look the example: https://jsfiddle.net/u2j2679u/