キーフレームを使用しないアニメーションを表示

Question

私はフレームワークとして角度4を使用します。私は、左側からセクションのshow hideをアニメートしようとしています。私は、コードの作品は完全に罰金表示

.help-section 
    background-color #EDF6F8; 
    width 300px 
    display none; 
    position relative; 
    padding 20px 
    animation hidefromleft 1s 

.help-section.show-help 
    display block 
    animation showfromright 1s 



@keyframes showfromright { 
    from { 
    right:-300px; display none; 
    } 
    to { 
    right 0;display block; 
    } 
} 

@keyframes hidefromleft { 
    from { 
    right 0;display block; 
    } 
    to { 
    right:-300px; display none; 
    } 
} 

の下に書かれているが、隠れてはいません。アニメーションで要素の隠蔽を処理する方法はありますか？隠れてもアニメーションはかかりません。

Answer 1

cssから表示プロパティをアニメーション化することはできません。

しかし、不透明度と可視性はアニメートできます。

はどのようにこのような何かについて：

.help-section { 
    animation: hidefromleft 2s; 
} 

@keyframes hidefromleft { 
    0% {right: 0; display: block; opacity: 1;} 
    50% {right: -300px; opacity: 0} 
    100% {opacity: 1; display: none;} 
} 

個人的に、私はいつも遷移の代わりに、アニメーション（https://www.w3schools.com/css/css3_transitions.asp）を使用します。