Javascript 和 CSS animation 定時關閉

Question

我遇到了一些麻煩。 我在一個數組中有 5 行文本隨計時器而變化，但我認為 css 計時器 animation 的時間不正確，或者我設置 @keyframes 幻燈片的方式設置不正確。

文字不透明度降為0后，文字變化之間的時間也相當長

它應該做的是：文本顯示--->動畫向下滑動--->文本淡入--->下一個文本出現

 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>

Answer 1

 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; } 100% { -webkit-transform: translate(0, 1em); opacity: 0; } }

 <main> <div class="background"></div> <div class="vert-line"> <p></p> </div> </main>