I am having an issue with a CSS animation that mimics the Star Wars credits. The problem I'm facing is that the animation cuts off before all the text has scrolled.
Why is it that I can't display all the text content I want within the animation?
The speed of the animation only seems to control the scroll speed, and I haven't been able to figure out how @keyframes could handle this specific issue.
Despite my text being longer than the original content and containing additional paragraphs, I fail to comprehend why this affects the animation's behavior. In theory, shouldn't the animation be endless regardless of the text length?
body {
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
background: #000 url(https://cssanimation.rocks/demo/starwars/images/bg.jpg);
}
.fade {
position: relative;
width: 100%;
min-height: 60vh;
top: -25px;
background-image: linear-gradient(0deg, transparent, black 75%);
z-index: 1;
}
.star-wars {
display: flex;
justify-content: center;
position: relative;
height: 800px;
color: #feda4a;
font-family: 'Pathway Gothic One', sans-serif;
font-size: 500%;
font-weight: 600;
letter-spacing: 6px;
line-height: 150%;
perspective: 400px;
text-align: justify;
}
.crawl {
position: relative;
top: 99999px;
transform-origin: 50% 100%;
animation: crawl 60s linear infinite;
/* velocidad del texto */
}
.crawl>.title {
font-size: 90%;
text-align: center;
}
.crawl>.title h1 {
margin: 0 0 100px;
text-transform: uppercase;
}
@keyframes crawl {
0% {
top: -100px;
transform: rotateX(20deg) translateZ(0);
}
100% {
top: -6000px;
transform: rotateX(25deg) translateZ(-2500px);
}
}<div class="fade"></div>
<section class="star-wars">
<div class="crawl">
<div class="title">
<p>Episode XIII</p>
<h1>THE ADVAITIC JEDIS</h1>
</div>
<p>On planet Earth, an unknown virus terrifies the population. The hordes of the conspiracy empire confine people in their homes, completely terrified.</p>
<p>It was then the perfect moment for a command from the interstellar confederation led by a Dutch Sith to decide to kidnap Fernando Cain. They wanted to make him pay for his insolent disrespect.</p>
<p>Fernando Cain did not resist. "The movie E.T has more metaphysics than you..." he said, provoking them.
</p>
<p>His loyal Advaitic Jedi friend, FRAN SOLO, decides to go on his rescue mission... ...again. He already saved him from a fight in a bar with some drunk Greys when he messed with them. "You have to be idiots... ...being experts in genetic engineering and forgetting
to hybridize a decent penis.." </p>
<p>FRAN SOLO retrieves his ship hidden deep in Gran Canaria and this time, due to the danger of the mission, he decides not to go alone on this rescue adventure. He decides to find the other Advaitic Jedis located at the far ends of the universe transmitting
their knowledge.</p>
<p>JUAN QUENOVI was teaching reiki to porn actresses on the planet Xumino as usual. Commander ALEC CHEWBACCA was having intercourse with twelve interstellar valkyries when he heard the news. "After about 100 more interstellar couplings, I'll join the
adventure." he said. </p>
<p>FRAN sent several interstellar telemessages. One to PABLO PADAWAN who was as always engaged in interstellar diplomacy. This time explaining to the Hummits that smoked pork wasn't a provocation by the humans against their race
</p>
<p>Meanwhile, SERGIO REN was teaching Saturnian Astrology at the University of Titan to fifth-dimensional beings. They couldn’t figure out how many universes they had simultaneously born into. </p>
<p>ALBERTO ORGANA and ANIBAL DAMERON were studying Pleiadian shamanism on planet XJX-232, uncertain of their involvement. </p>
<p>"We can do it without really doing it, impersonally, if we save him, we save him, and if not, nothing happens, whatever will happen will happen, and if not something else will happen," exclaimed the great FRAN SOLO in a profound message. </p>
<p>Convinced, they embarked on an exciting and dangerous adventure. The Advaitic Jedis were together and no one in the world could stop them...</p>
<p>...well... ..perhaps they needed to find a sweet toroid from SERGIO REN for the journey...</p>
</div>
</section>