CSSアニメーションが残っていない

Question

私は入力フィールドと「次へ」ボタンがあるページを持っています。ユーザーが次にクリックすると、入力フィールドを縮小して「次へ」ボタンを削除します。私はそれがこのBootplyに見られるように主に働いています。私のCSSアニメーションは次のようになります。

.default { 
     transition: all 1.0s ease; 
    } 

    .exit { 
     padding-left:5rem; 
     padding-right:5rem; 
    } 

    .remove-button { 
     animation: animate-remove-button 1.0s; 
    } 

    @keyframes animate-remove-button { 
     from { 
      transform:scaleX(1.0); 
      opacity: 1.0; 
     } 

     to { 
      transform:scaleX(0); 
      opacity: 0; 
     } 
    } 

アニメーションが実行されます。ただし、アニメーションが完了すると、ボタンが再び表示されます。また、基本的にボタンの幅を0に縮小して、テキストフィールドが拡大するようにします。しかし、あなたがBootplyで見ることができるように、それはそうであるように見えますが、実際には起こっていません。

私には何が欠けていますか？

Answer 1

.remove-button { animation: animate-remove-button 1.0s; animation-fill-mode:forwards; }

アニメーション塗りつぶしモード：転送

https://developer.mozilla.org/en/docs/Web/CSS/animation-fill-mode

アニメーションの最後の状態を維持するために伝えます