CSS/LESSでこのシーケンスをどのようにアニメーション化できますか？

Question

これはアニメーションへの私の最初の進出です。私は、スライディングロゴとフェードインとフェードアウトの2つのスニペットを特徴とするアニメーションスプラッシュ画面を作成しようとしています。テキストが表示されるレイアウトは、次のようになります。

*------------------------* 
|      | 
|      | 
| [L] Lorem ipsum etc. | 
|      | 
|      | 
*------------------------* 

アニメーションがそうのように進行する必要があります

• ロゴ[L]は中央で始まる
• ロゴスライドはそれぞれの部屋を作り、左テキストの一部は、
• テキスト1は、同じ場所にロゴの右
• テキストに視野の内外に出入りビューの2つのフェードをフェード
• ロゴスライドセンターに戻る

私が直面している問題は、要素階層とアニメーション可能なプロパティの適切な組み合わせが、どこにあるべきものかを考え出すことになります。

私の最善の試みは、最大幅0のテキストと0の不透明度で始まります。 2番目の幅の広いテキストで最大幅をアニメートし、ロゴを脇に押してから、2番目のアニメーションで不透明度を使用して最初のテキストが表示されるまで適切な間隔をおいてください。しかし、ロゴを入れたまま、両方のテキストを同じ場所に正しく表示させることはできません。 （画面に余裕があると仮定すると、両方のテキストは、ロゴの右側のスペースに縦横に表示されますが、最初のテキストは1行、2行目は2行になります）

私はこれが正しいアプローチであるかどうかはわかりません。デザインを反応させるために、私はロゴとフォントのサイズを除いて、絶対的な寸法を指定しないようにしたいと思います。私はブートストラップを使用しています。

Codepen example

HTML：

<div class="overlay"> 
    <div class="overlay--splash"></div> 
    <div> 
    <div id="overlay__one" class="h1 overlay--text">Short piece of text</div> 
    <div id="overlay__two" class="h1 overlay--text">Slightly longer text <br /> which will span two lines.</div> 
    </div> 
</div> 

LESS：

.overlay { 
    z-index: 999; 
    position: absolute; 
    top: 0; 

    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 

    background: rgba(255,255,255,0.9); 
    padding: 100px; 

    .overlay--splash { 
    width: 200px; 
    min-width: 200px; 
    height: 200px; 
    margin: 1em; 
    display: inline-block; 
    align-self: center; 
    justify-content: center; 
    background-image: url("/images/app-icon.png"); 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    background-size: 200px; } 

    .overlay--text { 
    display: inline-block; 
    width: auto; 
    max-width: 0; 
    font-size: 64px; 
    font-weight: 900; 
    font-family: sans-serif; 
    color: @dark-blue; 
    opacity: 0; 
    } 

    #overlay__one { 

    .keyframes(fade-in-out; { 
     0% { opacity: 0; } 
     40% { opacity: 0; } 
     60% { opacity: 1; } 
     80% { opacity: 1; } 
     100% { opacity: 0; } 
     }); 

    .animation(fade-in-out 5s linear) 
    } 

    #overlay__two { 
    .keyframes(slide-fade; { 
     0% { opacity: 0; max-width: 0; } 
     10% { opacity: 0; max-width: 0; } 
     20% { opacity: 0; max-width: 1600px; } 
     50% { opacity: 0; max-width: 1600px; } 
     60% { opacity: 1; } 
     70% { opacity: 1; } 
     80% { opacity: 0; max-width: 1600px; } 
     90% { max-width: 0; } 
     }); 

    .animation(slide-fade 10s linear) 
    } 
} 

Answer 1

よりもむしろCSSで直接アニメーションのすべてをやろうとし、それはですべてをスタックする方がはるかに簡単であることが判明画面の中央はtransformを使用し、次にjQueryを使ってトランジションをアニメートします。https://codepen.io/anon/pen/BWpQXg

var dX = $("#overlay__two").width()/2; 
$(".overlay--splash").animate({left: "-=" + (dX + 140)}); 
$("#overlay__one").delay(1000).fadeToggle(1000).fadeToggle(1000); 
$("#overlay__two").delay(3000).fadeToggle(1000).delay(1000).fadeToggle(1000); 
$(".overlay--splash").delay(6000).animate({left: "+=" + (dX + 140)});