Basically, it'll go through the rotation and once the 8 leaves it just stays blank for a while and then the animation resets. I want it to continuously scroll without any breaks but I can't figure out how. I have added extra list items to see if it shortens the wait time but it doesn't seem to. Thanks for your help.
HTML
<div class="container">
<div class="grid-container">
<div class="grid-1">
<div class="opening rainbow-border">
<h1 class="info rainbow-text">Hello, my name is Prima. I'm a front-end web developer.</h1>
</div>
</div>
<div class="grid-2">
<img src="/images/my-pixel.gif" alt=" ">
</div>
<div class="grid-3 marquee rainbow-border bg-dark">
<ul class="marquee-container">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</div>
</div>
</div>
CSS
* {
margin: 0;
padding: 0%;
box-sizing: border-box;
}
body {
font-family: 'Hachi Maru Pop', monospace;
line-height: 1.6;
}
ul {
list-style-type: none;
display: flex;
}
/* About Section */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, .25fr);
}
.grid-3 {
grid-column: 3;
grid-row: 2;
margin-bottom: 1rem;
}
/*Marquee Scroller*/
.marquee {
width: 40vw;
height: 20vh;
overflow: hidden;
}
.marquee-container {
height: 100%;
display: flex;
animation: scrolling 10s linear infinite;
}
@keyframes scrolling {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100vw);
}
}
.marquee-container:hover {
animation-play-state: paused;
}
.marquee-container li {
display: flex;
justify-content: center;
align-items: center;
width: 20vh;
flex-shrink: 0;
white-space: nowrap;
font-size: 2rem;
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…