SVG mit CSS animieren
bearbeitet von
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:
~~~css
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](https://wiki.selfhtml.org/wiki/Animation#animation-fill-mode), damit es nicht zurückspringt.
Die Höhe skaliert aber mit.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun:
*[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}
SVG mit CSS animieren
bearbeitet von
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:
~~~css
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](https://wiki.selfhtml.org/wiki/Animation#animation-fill-mode), damit es nicht zurückspringt.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun:
*[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}