html - 文本在 CSS 动画之后自行居中

Question

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

文本似乎是自行“键入”出来的，然后以闪烁的光标结束。它做得很好，但是当它完成一行输入时，该行往往会“ float ”或“移动”到页面的中心。

我使用 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% 的动画上，因为标题标签是 block ，而 block 始终是其容器的 100%，动画实际上是从 0 到页面的总宽度。您在这里尝试做的事情有点棘手，但可以在每个标题标签内嵌套一个标签并为该标签设置动画，同时为每个标题标签提供内联行为，以确保宽度不是容器的 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%;
   	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>