CSS: Einblendung von Links "springt" bei Seitenrand

[TimNie]

Hallo,

auf o.g. Seite wird - je nach Bildschirmbreite - das Menü (<nav> mit Klasse "sidebar") direkt angezeigt oder muss über einen Menübutton eingeblendet werden.

Wird die Seite in einem kleinen Browserfenster geladen, sodass das Menü initial nicht angezeigt wird (display:none), und das Browserfenster dann in der Breite vergrößert, schiebt sich der Seiteninhalt nach links und das Menü wird von links eingeblendet:

.w3-animate-left{animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}

Das funktioniert alles wunderbar, aber:

Wird die Seite in einem großen Browserfenster geladen (dann mit margin:auto) und das Menü "fliegt" von links ein, dann bewegt es sich nicht fließend an den Seiteninhalt heran, sondern "springt" die letzten 100-200 Pixel.

Es liegt ja wahrscheinlich an den automatischen Seitenrändern, aber ich bekomme den Dreh nicht, wie ich Abhilfe schaffen kann. Vielleicht kann einer von euch mich auf den richtigen Weg bringen?

Besten Dank!