Dietrich der Anfänger: SVG mit CSS animieren

Beitrag lesen

SELF-Forum

SVG mit CSS animieren

Dietrich der Anfänger (Versionen)
– Informationen zu den Bewertungsregeln

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:

<html>
<head>
  <meta charset="utf-8">
  
<style>
@keyframes wachsen {
  0 {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

svg {
    
	height: 200px;
    animation: wachsen 5s linear;
}	
	
</style>

</head> 
<body>

<svg  viewbox="0 0 4 3">
  <desc>Flagge Deutschlands</desc> 
  <rect x="0" y="0" width="5" height="1" fill="black" />
  <rect x="0" y="1" width="5" height="1" fill="red" />
  <rect x="0" y="2" width="5" height="1" fill="#fc0" />
</svg>

                     
</body>
</html>`

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

Beitrag melden
–
Informationen zu den Bewertungsregeln