フレックス要素を画面外に移動してアニメーションを開始します

このアニメーションをうまく動作させるにはどうすればよいかわかりません。フレックス要素を画面外に移動してアニメーションを開始します

フレックスボックスレイアウトの内側に垂直に配置された2つの要素がありますが、これらの要素をオフスクリーンからスライドインすることで最終的な位置にアニメーション化したいのですが、これは私に予期しない結果をもたらしますフレックス位置決めのために仮定します。どのように私はこれに取り組むことができるかについての任意の考え？

ここでは、物事の現状を示すプランカーです。私はアニメーションを遅くして、ジレンマを見ることができます。そして、私はこれを取ろうとしています。

.scroller-item-wrapper { 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    justify-content: center; 
    overflow: hidden; 
    .scroll-animator { 
    position: relative; 
    width: 100%; 
    flex-shrink: 0; 
    flex-grow: 0; 
    transform: translateY(100%); 
    &:not(.pre-animated){ 
     animation-name: scrollItemIn; 
     animation-duration: 1s; 
     animation-timing-function: ease-out; 
     animation-fill-mode: forwards; 
     &:last-of-type { 
     animation-delay: 1300ms; 
     } 
    } 
    &.leaving { 
     animation-name: scrollItemOut; 
     animation-duration: .3s; 
     animation-timing-function: ease-out; 
     animation-fill-mode: forwards; 
     transform: translateY(0%); 
     &:last-of-type { 
     animation-delay: 300ms; 
     } 
    } 
    &:last-of-type { 
     .scroller-item { 
     margin-bottom: 0; 
     } 
    } 
    } 
    ... 
}

https://plnkr.co/edit/MPyuTSjy2s5XWLk5EVVD?p=preview

出典

2017-10-09 Jordan

plnkr ...のアニメーションは表示されません。 – LGSon

申し訳ありません、保存を忘れて、もう一度確認してください – Jordan

そして実際の問題は何ですか？ – LGSon