animation doesnot travail sur l'affichage: bloc à aucun

Question

Je suis en train de montrer ou cacher le titre de sidepanel tout effondrer à la largeur: 50%

J'utilise display: block à display: none; D'une certaine façon, je ne suis pas en mesure d'utiliser l'animation sur elle

Voici le code que je utilise

.fade-in { 
    animation: fade-in 0.5s ease-in-out both; 
} 
.fade-out { 
    animation: fade-out 0.6s ease-in-out both; 
} 
@keyframes fade-in { 
    0% { 
    opacity: 1; 
    display: block; 
    } 
    100% { 
    opacity: 0; 
    display: none; 
    } 
} 
@keyframes fade-out { 
    0% { 
    opacity: 0; 
    display: none; 
    } 
    100% { 
    opacity: 1; 
    display: block; 
    } 
} 

Toute idée pourquoi affichage ne fonctionne pas

Answer 1

.fade-in { 
 
    animation: fade-in 0.5s ease-in-out both; 
 
    background:black; 
 
    height:200px; 
 
    width:200px; 
 
    margin-bottom:10px; 
 
} 
 
.fade-out { 
 
    animation: fade-out 0.6s ease-in-out both; 
 
    background:red; 
 
    height:200px; 
 
    width:200px; 
 
} 
 
@keyframes fade-in { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
} 
 
@keyframes fade-out { 
 
    0% { 
 
    opacity: 1; 
 
    display: none; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
}

<div class="fade-in"></div> 
 
<div class="fade-out"></div>