テキストアニメーションを特定の順序で実行させ、CSSを使用してページの中央で開始するにはどうすればよいですか？

Question

1. テキストアニメーションが開始されると、テキストアニメーションを次のような順序で実行するにはどうすれば1行目、3行目、2行目とは異なりますか？たとえば、次の順番で各行を表示するとします。私のデジタルポートフォリオ

2. へ
   • ようこそ私の名前は私がロンドンからフロントエンドのWeb開発者ですリアム・ドカティ
   • です。

3. テキストアニメーションをページの中央から開始し、左からスワイプしないようにするにはどうすればよいですか？

JSFIDDLE

<!-- Intro Section --> 
    <section id="intro" class="intro-section"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-lg-12 text-center"> 
      <p class="main1">Welcome To My Digital Portfolio</p> 
      <p>My name is Liam Docherty</p> 
      <p>I'm a front-end web developer from London.</p> 
     </div> 
     </div> 
    </div> 
    </section> 

Answer 1

簡単なtext-align: centerがあなたのアニメーションをめちゃくちゃにせずにテキストをセンタリングするため動作しません、あなたは幅がに起こるものは何でも（あなたのテキストのための明示的な幅を設定することができそうですので、このフォント/サイズの組み合わせにしてください）、そしてそれを中心にするために左右の余白autoを使用してください。

次に、文の前に各アニメーションの合計の長さに等しいanimation-delayの別々のアニメーションを付けます。 animationの略語では、私は以下を使用しています。これは遅延の2番目の数字です。最初の数字（それぞれ4s）はanimation-durationです。

各アニメーションは、0幅から実際の最終幅までのテキストを設定します。

しかし、この方法ではデフォルトのスタイルが0の幅なので、forwardsのanimation-fill-modeを設定して、アニメーションが終了してもテキストが消えないようにしてください。

p { 
color: white; 
font-family: "Helvetica"; 
font-size: 1.3em; 
margin: 10px auto; 
white-space: nowrap; 
overflow: hidden; 
width: 0px 
} 
.main1 { 
    animation: type 4s 0s forwards steps(60, end); 
} 
.main2 { 
    animation: type2 4s 4s forwards steps(60, end); 
} 
.main3 { 
    animation: type3 4s 8s forwards steps(60, end); 
} 
@keyframes type{ 
from { width: 0; } 
to { width: 430px; } 
} 
@keyframes type2{ 
from { width: 0; } 
to { width: 224px; } 
} 
@keyframes type3{ 
from { width: 0; } 
to { width: 364px; } 
} 

Updated Fiddle here

 

<p class="main1">Welcome To My Digital Portfolio</p> 
<p class="main2">My name is Liam Docherty</p> 
<p class="main3">I'm a front-end web developer from London.</p> 

。