Wenn man ein Element mittel css-animations ausblenden möchte, funktioniert das mittels visibility:hidden. Allerdings wird der Platz, den das Objekt als Platzhalter reserviert, folgende Objekte rücken nicht auf. Das gleiche bei opacity:0. Verwendet man display:none, z.B:

@keyframes fadeOut {
0% {
    transform: scale(1);
  }
  99% {
   transform: scale(0);
}
100% {
   display:none;
   transform: scale(0);
}
}

funktioniert dies nur im Chrome, Safari (MacOS & iOS) und Firefox weigern sich. Mittels position:absolute

@keyframes fadeOut {
0% {
   position: relative;
   transform: scale(1);
}
99% {
   position: relative;
   transform: scale(0);
}
100% {
   position: absolute;
   transform: scale(0);
   z-index:-1;
}
}

blendet man das Element nur optisch aus und positioniert es mit einer Höhe:0 und Weite:0 hinter den sichtbaren Elementen. Man sollte darauf achten, dass das übergeordnete Elternelement (z.B. <ul>) dementsprechend mit position:relative versehen ist. Das Einblenden könnte dann wieder so aussehen:

@keyframes fadeIn {
0% {
   position: relative;
   z-index: 1;
   transform: scale(0);
}
5% {
   position: relative;
   transform: scale(0);
}
100% {
   position: relative;
   transform: scale(1);
}
}