Text moves to the right during typing text animation CSS - html

Question

After each typing text animation, the next text is slightly moved to the right. How do I make sure that the text keeps aligned left? "text-align: left" and "margin-left:0" do not work. When I include "margin-right: 100%" it keeps aligned left, but each text comes on a new line, which is not what I want.
.text_1 {
animation: text1;
max-width: 12.5em;
padding-bottom: 0.1em;
}
.text_2 {
animation: text2;
max-width: 9.1em;
padding-bottom: 0.1em;
}
.text_3 {
animation: text3;
max-width: 5.3;
padding-bottom: 0.1em;
}
.text_4 {
animation: text4;
max-width: 15;
padding-bottom: 0.1em;
}
.text_5 {
animation: text5;
max-width: 15.2;
padding-bottom: 0.1em;
}
.text_1,
.text_2,
.text_3,
.text_4,
.text_5 {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
animation-duration: 20s;
animation-timing-function: steps(25, end);
animation-iteration-count: infinite;
}
.text_1::after,
.text_2::after,
.text_3::after,
.text_4::after,
.text_5::after {
content: "|";
position: absolute;
right: 0;
animation: caret infinite;
animation-duration: 1s;
animation-timing-function: steps(1, end);
}
#keyframes text5 {
0%,
80%,
100% {
width: 0;
}
85%,
95% {
width: 15.2em;
}
}
#keyframes text4 {
0%,
60%,
80%,
100% {
width: 0;
}
65%,
75% {
width: 15em;
}
}
#keyframes text3 {
0%,
40%,
60%,
100% {
width: 0;
}
45%,
55% {
width: 5.3em;
}
}
#keyframes text2 {
0%,
20%,
40%,
100% {
width: 0;
}
25%,
35% {
width: 9.1em;
}
}
#keyframes text1 {
0%,
20%,
100% {
width: 0;
}
5%,
15% {
width: 12.5em;
}
}
#keyframes caret {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
h1 {
font-family: Segoe UI Black;
}
h2 {
font-family: Segoe UI Black;
}
h3 {
font-family: Segoe UI Black;
}
h4 {
font-family: Segoe UI Black;
}
h5 {
font-family: Segoe UI Black;
}
h6 {
font-family: Segoe UI Black;
}
.container-text {
padding-top: 5em;
padding-left: 5em;
padding-bottom: 30em;
margin-top: 3;
}
.container-fluid {
margin-top: 5em;
}
#title {
font-size: 3em;
}
#subtitle {
font-size: 2.5em;
font-family: Segoe UI Light;
margin-bottom: 1em;
background: red;
}
#subsubtitle {
font-size: 1.5em;
font-family: Segoe UI Light;
color: #BFBFBF;
margin-bottom: 1em;
}
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 container-text">
<h1 id="title">Title</h1>
<h2 id="subtitle">
<span class="text_1">Tailor your marketing strategy</span>
<span class="text_2">Gauge public opinion</span>
<span class="text_3">Study trends</span>
<span class="text_4">Explore variables like demographics</span>
<span class="text_5">Monitor sentiment related to a topic</span>
</h2>
</div>
</div>
</div>

Answer 1

You could apply a flex-box style to the parent container ( the h2#subtitle ) and align the contents to the start of the flex-box
.text_1 {
animation: text1;
max-width: 12.5em;
padding-bottom: 0.1em;
}
.text_2 {
animation: text2;
max-width: 9.1em;
padding-bottom: 0.1em;
}
.text_3 {
animation: text3;
max-width: 5.3;
padding-bottom: 0.1em;
}
.text_4 {
animation: text4;
max-width: 15;
padding-bottom: 0.1em;
}
.text_5 {
animation: text5;
max-width: 15.2;
padding-bottom: 0.1em;
}
.text_1,
.text_2,
.text_3,
.text_4,
.text_5 {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
animation-duration: 20s;
animation-timing-function: steps(25, end);
animation-iteration-count: infinite;
}
.text_1::after,
.text_2::after,
.text_3::after,
.text_4::after,
.text_5::after {
content: "|";
position: absolute;
right: 0;
animation: caret infinite;
animation-duration: 1s;
animation-timing-function: steps(1, end);
}
/* flexbox on parent */
h2#subtitle{
display:flex;
flex-direction:row;
align-items:flex-start;
}
#keyframes text5 {
0%,
80%,
100% {
width: 0;
}
85%,
95% {
width: 15.2em;
}
}
#keyframes text4 {
0%,
60%,
80%,
100% {
width: 0;
}
65%,
75% {
width: 15em;
}
}
#keyframes text3 {
0%,
40%,
60%,
100% {
width: 0;
}
45%,
55% {
width: 5.3em;
}
}
#keyframes text2 {
0%,
20%,
40%,
100% {
width: 0;
}
25%,
35% {
width: 9.1em;
}
}
#keyframes text1 {
0%,
20%,
100% {
width: 0;
}
5%,
15% {
width: 12.5em;
}
}
#keyframes caret {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
h1 {
font-family: Segoe UI Black;
}
h2 {
font-family: Segoe UI Black;
}
h3 {
font-family: Segoe UI Black;
}
h4 {
font-family: Segoe UI Black;
}
h5 {
font-family: Segoe UI Black;
}
h6 {
font-family: Segoe UI Black;
}
.container-text {
padding-top: 5em;
padding-left: 5em;
padding-bottom: 30em;
margin-top: 3;
}
.container-fluid {
margin-top: 5em;
}
#title {
font-size: 3em;
}
#subtitle {
font-size: 2.5em;
font-family: Segoe UI Light;
margin-bottom: 1em;
background: red;
}
#subsubtitle {
font-size: 1.5em;
font-family: Segoe UI Light;
color: #BFBFBF;
margin-bottom: 1em;
}
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 container-text">
<h1 id="title">Title</h1>
<h2 id="subtitle">
<span class="text_1">Tailor your marketing strategy</span>
<span class="text_2">Gauge public opinion</span>
<span class="text_3">Study trends</span>
<span class="text_4">Explore variables like demographics</span>
<span class="text_5">Monitor sentiment related to a topic</span>
</h2>
</div>
</div>
</div>