Ich würde gerne wissen, wie man die Erweiterung eines Rasterlayouts animiert. Wie Sie im Code sehen können, habe ich 4 Divs. Zwei davon werden angezeigt, die anderen beiden werden nur angezeigt, wenn das Kontrollkästchen aktiviert ist.

Wenn das Kontrollkästchen aktiviert ist, wird eine weitere Zeile mit div3 und div4 hinzugefügt. Wie animiere ich die Erweiterung? Es ist am besten, die Größe des Rasters klein zu halten. Ich möchte nicht, dass die Animation die (nicht vorhandenen) Ränder beeinflusst. Ich möchte dies auch ohne JavaScript tun. Ist es möglich?

       
   
 
Hallo
 
Hello2
 
Hello3
 
Hello4
 
  

.toggle { Breite: 100 %; } .Netz { Anzeige: Raster; Breite: 20 %; Rand: einfarbig schwarz 2px; } .div1 { Gitterspalte: 1; Gitterreihe: 1; } .div2 { Gitterspalte: 2; Gitterreihe: 1; } .div3 { Anzeige: keine; } .div4 { Anzeige: keine; } .toggle:checked ~ .grid > Bildschirmsperre; Gitterspalte: 1; Rasterreihe: 2; } .toggle:checked ~ .grid > Bildschirmsperre; Gitterspalte: 2; Rasterreihe: 2; }

Ich möchte, dass der Div-Container nach unten verschoben wird, um Platz für die hinzugefügten Zeilen zu schaffen. Vielen Dank für Ihre Hilfe.