We have a client who wants a marquee-style scrolling text banner, and I tried using CSS animations to achieve it. However, I encountered some quirks that I'm struggling to fix.
If you want to take a look at the issue, here is the link: https://jsfiddle.net/u2f6qdya/
The problem I'm facing is that the list elements get pushed out of line and stack up until the last one. The parent element is positioned absolutely, so I'm not sure why this is happening.
Another issue is with the keyframes. I want the items to start on the far left side of the screen, but they start coming in and scrolling before they have finished animating off the right side of the screen.
Here is the CSS code:
.sliding-marquee {
width: 100%;
height: 44px;
background-color: #000;
opacity: 0.6;
color: white;
line-height: 44px;
margin: 0 auto;
position: relative;
overflow: hidden;
margin-top: 10px;
}
.sliding-marquee ul {
left: 0;
top: 0;
position: absolute;
animation: marquee 20s linear infinite;
}
.sliding-marquee ul li {
display: inline-block;
font-size: 20px;
text-transform: uppercase;
}
.sliding-marquee ul li i {
margin-right: 20px;
}
.sliding-marquee ul li + li {
margin-left: 40px;
}
@keyframes marquee {
0% { left: -100% }
100% { left: 100% }
}
And here is the markup:
<div class="sliding-marquee">
<ul>
<li>TEXT 1</li>
<li>LONGER TEXT 2</li>
<li>EVEN LONGER TEXT 3</li>
</ul>
</div>