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);
}
}