I've been encountering some issues. I have an array containing 5 lines of text that change with a timer, but it seems that the css timer animation might not be synced properly or my @keyframes slidesdown setup could be incorrect.
The delay between text changes is quite long after the text's opacity fades to 0
What should happen is: text displays--->animation slides down--->text fades--->next text appears
let textElement = document.querySelector("p")
let textArray = [
"Are you looking for a quick learner?",
"Someone who is ever evolving?",
"Someone who strives to improve their knowledge?",
"Someone who loves problem-solving and finding solutions?",
"Someone who has the tenacity to succeed?"
]
let index = 0;
textElement.innerText = textArray[index]
setInterval(() => {
index = (index + 1) % textArray.length
textElement.innerText = textArray[index]
}, 5000).background {
background: var(--light--colour);
height: 88.4vh;
}
@keyframes animateBack {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
p {
height: 2em;
position: absolute;
font-size: 32px;
color: var(--darkest--colour);
margin-left: 1em;
width: 12em;
margin-top: 0em;
animation: slidesdown 5s ease infinite;
}
.vert-line {
border-left: 2px solid #012326;
margin-top: -17em;
height: 7em;
margin-left: 10em;
}
@keyframes slidesdown {
0%,
50% {
transform: translate(0, 0em);
opacity: 1;
}
50%,
100% {
-webkit-transform: translate(0, 1em);
opacity: 0;
}
}<main>
<div class="background"></div>
<div class="vert-line">
<p></p>
</div>
</main>