Issue with text filling, CSS Animation - html

Question

This is a CSS and HTML animation, simple text filling.
For some reason the text jumps when there is a space or if I add a dash?
Below you can see the output:
I've added the code below!
.comingsoon-loading {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.comingsoon-loading h1 {
position: absolute;
font-size: 20vh;
color: #ffcc00;
-webkit-text-stroke: 2px black;
text-transform: uppercase;
}
.comingsoon-loading h1::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: black;
-webkit-text-stroke: 0px black;
border-right: 4px solid black;
overflow: hidden;
animation: animate 6s linear infinite;
}
/* animation to fill text */
#keyframes animate
{
0%,10%,100%
{
width: 0;
}
50%,70%
{
width: 100%;
}
}
<div class="comingsoon-loading">
<h1 data-text="COMING-SOON">COMING-SOON</h1>
</div>

Answer 1

The problem lies in the way you handle text in your animation.
You are animating a string of text appearing slowly but don't account for any of the inherit string properties such as line breaking.
During your animation, the first word: "COMING", appears normally as the width increases, but once the hyphen appears, HTML thinks you have inserted a word break point and tries to break "SOON" to a new line.
This can be solved by adding white-space: nowrap; to your ::before section, to prevent it from breaking as the animation plays out.
HTML
<div class="comingsoon-loading">
<h1 data-text="COMING-SOON">COMING-SOON</h1>
</div>
CSS
.comingsoon-loading {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: blue;
}
.comingsoon-loading h1 {
position: absolute;
font-size: 20vh;
color: #ffcc00;
-webkit-text-stroke: 2px black;
text-transform: uppercase;
}
.comingsoon-loading h1::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: black;
-webkit-text-stroke: 0px black;
border-right: 2px solid black;
overflow: hidden;
animation: animate 5s linear infinite;
white-space: nowrap;
}
/* animation to fill text */
#keyframes animate {
0%,
10%,
100% {
width: 0;
}
50%,
70% {
width: 100%;
}
}