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％，因为Heading标签是块，并且块总是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>