Text moves itself center after CSS Animation - html

Question

I have some misbehaving text in a CSS animation.
The text appears to "type" itself out, and then end with a blinking cursor. It does this well, but when it's done typing a line that line tends to "float" or "shift" itself over to the center of the page.
I am centering the text with text-align: center; as well as with a flexbox (to get it center of the page).
Here's a link to a JSFiddle
And here's some code:
html, body {
height: 100%;
width: 100%;
}
body {
overflow-x: hidden;
overflow-y: hidden;
}
.do-you-even-flexbox, .content {
position:relative;
top:0;
width:100%;
height:100%;
}
.content {
padding:8px 20px 15px;
display:flex;
align-content:center;
}
.box {
height:20%;
margin:auto
}
h1 {
text-align: center;
font-size: 75px;
margin-top: 0em;
margin-bottom: 0em;
padding: 0em;
}
h2 {
font-size: 50px;
text-align: center;
margin-top: 0em;
margin-bottom: 0em;
padding: 0em;
}
h3 {
font-size: 25px;
text-align: center;
margin-top: 0em;
margin-bottom: 0em;
padding: 0em;
}
a {
color: #000;
text-decoration: none;
}
.content h1 {
white-space:nowrap;
overflow:hidden;
-webkit-animation: typing 5s steps(60, end);
-moz-animation: typing 5s steps(60, end);
}
.content h2 {
white-space:nowrap;
overflow:hidden;
-webkit-animation: typing 5s steps(60, end);
-webkit-animation-delay: 4s;
-webkit-animation-fill-mode:both;
-moz-animation: typing 5s steps(60, end);
-moz-animation-delay:4s;
-moz-animation-fill-mode:both;
}
.content h3 {
white-space: nowrap;
overflow: hidden;
-webkit-animation: typing 10s steps(120, end);
-webkit-animation-delay: 8s;
-webkit-animation-fill-mode: both;
-moz-animation: typing 10s steps(120, end);
-moz-animation-delay: 8s;
-moz-animation-fill-mode: both;
}
span {
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
}
#-webkit-keyframes typing {
from { width: 0; }
to { width: 100%; }
}
#-webkit-keyframes blink {
to { opacity: .0;}
}
#-moz-keyframes typing {
from { width: 0; }
to { width: 100%; }
}
#-moz-keyframes blink {
to { opacity: .0; }
}
And here's some HTML that goes with it:
<i class="do-you-even-flexbox"></i>
<div class="content">
<div class="box">
<h1>This wasn't the same as the fiddle code.</p>
<h2>So I've removed some details so it's similar to the fiddle.</p>
<h3>~ get in touch ~ about me ~ blog ~ projects ~ my portfolio ~<span> |</span></h3>
</div>
</div>

Answer 1

well, the problem seems to be with the animation from 0 to 100%, since Heading tags are blocks, and blocks always are 100% percent from its container, the animation actually goes from 0 to the total width of the page. What you are trying to do here its a little bit tricky but can be done nesting a tag inside every Heading tag and animating that tag while giving each heading tag inline behavior which ensures the width is not 100% of the container but just the text.
html, body {
height: 100%;
width: 100%;
}
body {
overflow-x: hidden;
overflow-y: hidden;
}
.do-you-even-flexbox, .content {
position:relative;
top:0;
width:100%;
height:100%;
}
.content {
padding:8px 20px 15px;
display:flex;
align-content:center;
}
.box {
height:20%;
margin:auto
text-align: center;
}
h1, h2, h3 {
display: inline-block;
position: relative;
background-color: #cccccc;
}
h1 span {
font-size: 75px;
margin: 0;
padding: 0em;
display: block;
background-color: #ff0000;
}
h2 span {
font-size: 50px;
text-align: center;
margin-top: 0em;
margin-bottom: 0em;
padding: 0em;
}
h3 span {
font-size: 25px;
text-align: center;
margin-top: 0em;
margin-bottom: 0em;
padding: 0em;
}
a {
color: #000;
text-decoration: none;
}
.content h1 span {
white-space:nowrap;
overflow:hidden;
-webkit-animation: typing 2s steps(60, end);
-moz-animation: typing 2s steps(60, end);
}
.content h2 {
white-space:nowrap;
overflow:hidden;
-webkit-animation: typing 2s steps(60, end);
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode:both;
-moz-animation: typing 2s steps(60, end);
-moz-animation-delay:2s;
-moz-animation-fill-mode:both;
}
.content h3 {
white-space: nowrap;
overflow: hidden;
-webkit-animation: typing 10s steps(120, end);
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode: both;
-moz-animation: typing 2s steps(120, end);
-moz-animation-delay: 2s;
-moz-animation-fill-mode: both;
}
span.caret {
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
}
#-webkit-keyframes typing {
from { width: 0; }
to { width: 100%; }
}
#-webkit-keyframes blink {
to { opacity: .0;}
}
#-moz-keyframes typing {
from { width: 0; }
to { width: 100%; }
}
#-moz-keyframes blink {
to { opacity: .0; }
}
<i class="do-you-even-flexbox"></i>
<div class="content">
<div class="box">
<h1><span>This</span></h1>
<br>
<h2><span>This is a subtitile</span></h2>
<br>
<h3><span>These are links to things on other pages.<span class="caret">|</span> </span></h3>
</div>
</div>