可変幅で滑らかなCSSアニメーション

Question

CSSとanime.jsでTHIS GIFのようにする方法を知りました。子音だけの単語からスムーズに開き、一度に1つ（またはすべて）の母音が現れるようにします。

ヒントは、単語が中央に配置されているか、それがどのくらいの長さであるか、またはいくつの文字が含まれているかということです。文字を追加すると（アニメーションあり）、それは中央にとどまり、スムーズに次の手紙を消すためのスペースを開きます。

私は全く専門家ではありません。私はこれを始める方法も知らないです。一度にすべての文字別に1つのピクセルを移動する場合を除き、それは言い換えるための再利用可能な仕事の時間ではないだろう

は、CSSでこれさえ可能です（たとえばiためwまたはs、その後小さいですか）？ 事前に入力またはアドバイスをありがとうございます。

Answer 1

固定空白文字が欲しい場合は、純粋なCSS：fiddleでそれを行うことができます。

<p> 
    <span>N</span> 
    <span class="vowel">i</span> 
    <span>c</span> 
    <span class="vowel">o</span> 
    <span>l</span> 
    <span class="vowel">a</span> 
    <span>s</span> 
</p> 
<style> 
    p span { 
    display:inline-block; 
    width:0.7em; 
    text-align:center; 
    } 

    .vowel { 
    opacity:0; 
    width:0em; 
    animation:enter 0.6s 0.4s forwards; 
    } 
    .vowel ~ .vowel { 
    animation-delay:0.6s; 
    } 
    .vowel ~ .vowel ~ .vowel { 
    animation-delay:0.9s; 
    } 

    @keyframes enter { 
    0% { width:0; opacity:0; } 
    49% {opacity:0;} 
    50% {opacity:1;} 
    100% { width:0.7em; opacity:1;} 
    } 
</style>