使用關鍵幀顯示none none動畫

Question

我使用angular 4作爲我的框架。我正在試圖從左側爲節目添加動畫。我寫下面的代碼

.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）。