アニメーションの実行中にCSSアニメーションが表示される

Question

ユーザが検証ボタンを押したときにフォームの上にエラーメッセージボックスが表示され、入力フィールドが無効になるCSSアニメーションがあります。

アニメーションの実行中に問題が発生した場合、メッセージボックスがフォームの上部に表示されます。アニメーションが終了すると、メッセージボックスが期待どおりに下に表示されます。

アニメーションを他のDIVの下で実行するにはどうすればよいですか？私はz-indexを何の成功もなしに変えようとしました。

フィドルを参照してください：実際には、位置決めとのzインデックスを持つ操作が役立つはずhttps://jsfiddle.net/FlorentM/zhp9qb8z/15/

#requestQuoteBox .alert.ng-hide-remove { 
    transition: 5000ms cubic-bezier(0.250, 0.100, 0.250, 1.000) all; 
} 

#requestQuoteBox .alert.ng-hide { 
    opacity: 0; 
    margin-bottom: -50px; 
} 

Answer 1

を。

#requestQuoteBox .form-group { 
    position: relative; 
    z-index: 2; 
} 

#requestQuoteBox .alert { 
    position: relative; 
    z-index: 1; 
} 

これらの属性をCSSに追加してみましょう。希望する動作が表示されます。

https://jsfiddle.net/mityaustinov/yzwjd8ps/2/