CSS动画后文本移动中心

Question

我在CSS动画中有一些行为不当的文本。

该文本显示为“键入”自身，然后以闪烁的光标结束。它可以很好地完成这项工作，但是当完成时，输入一行可能会“漂浮”或“移动”到页面中心。

我正在将文本与text-align: center;以及flexbox（使其位于页面的中心）对齐。

Here's a link to a JSFiddle

下面是一些代码：

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; } 
} 

而且这里的一些HTML与它去：

<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>~<a href="contact.html"> get in touch </a>~<a href="about.html"> about me </a>~<a href="blog/"> blog </a>~<a href="projects.html"> projects </a>~<a href="portfolio/"> my portfolio </a>~<span> |</span></h3> 
    </div> 
    </div> 

Answer 1

好，这个问题似乎是从0到动画100％，因为标题标记是块，并且块始终占其容器的100％，所以动画实际上从0到整个页面的宽度。你在这里试图做的有点棘手，但是可以在每个Heading标签内嵌入一个标签，并为每个标题赋予内联行为动画，同时确保宽度不是容器的100％，而是文本。

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%; 
 
    \t 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 { 
 
\t white-space:nowrap; 
 
    overflow:hidden; 
 
    -webkit-animation: typing 2s steps(60, end); 
 
    -moz-animation: typing 2s steps(60, end); 
 
} 
 
.content h2 { 
 
\t 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>