Animation af elementer når display er sat til block er ikke specielt nemt, da værdien none bliver sat i samme øjeblik CSS’en afvikles. Før i tiden skulle man rode rundt med Javascript til den slags, meeeen, nu findes der heldigvis en (forholdsvis) nem løsning med ren CSS, der kan det samme.
Hvordan virker det så?
Du definerer en keyframe-animation, der ændrer opaciteten fra 0 (helt gennemsigtig) til 1 (fuldt synlig). Samtidig styrer du display-egenskaben inden for disse keyframes.
I start-keyframen (f.eks. 0%) sætter du opaciteten til 0 og display til none for at skjule elementet. I slut-keyframen (f.eks. 100%) sætter du opaciteten til 1 og display til block for at vise elementet.
Når du anvender denne animation på et element, overgår det glidende mellem skjulte og synlige tilstande – helt uden brug af JavaScript.
@keyframes fadeIn {
0% {
opacity: 0;
display: none;
}
100% {
opacity: 1;
display: block;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
display: block;
}
100% {
opacity: 0;
display: none;
}
}
.element {
animation: fadeIn 2s ease-in-out forwards;
}
.element-hidden {
animation: fadeOut 2s ease-in-out forwards;
}
Læs mere om keyframe-animation og display block-none her