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>