SVG mit CSS animieren

[Matthias Scharwies]

Servus!

Hallo, ich möchte eine Flagge von der Breite 0 auf ihre Gesamtbreite wachsenlassen (Höhe bleibt gleich). Ich habe verschiedene Varianten versucht, die letzte hier:

Leider klappt es nicht. Könnt Ihr mir einen Tipp geben?

Versuch mal das, ob dir das passt:

svg {
    height: 200px;
    animation: wachsen 5s linear;
    width: 0;
    animation-fill-mode: forwards;
}	

@keyframes wachsen {
  0 {
    width: 0;
  }
  100% {
    width: 300px;
  }
}

Ein Anfangswert für width schon bei svg; animation-fill-mode, damit es nicht zurückspringt.

Die Höhe skaliert aber mit.

Herzliche Grüße

Matthias Scharwies