SVG (Scalable Vector Graphics) sind Vektorgrafiken, die auf XML basieren. Man kann SVGs mit CSS animieren, um Bewegungen, Verformungen, Änderungen in der Farbe und andere Effekte zu erzeugen.
1. Inkludieren Sie das SVG-Dokument in Ihr HTML:
SVGs können auf verschiedene Arten in HTML eingefügt werden, aber die einfachste Methode ist, das SVG-Tag direkt in das HTML-Dokument einzufügen. Das ist wichtig, um mit CSS auf das SVG zugreifen zu können.
```html
```
In diesem Beispiel ist ein SVG erstellt, das einen roten Kreis enthält.
2. Definieren Sie eine CSS-Animation:
Animationen werden mit den `@keyframes` Attribut in CSS definiert. Innerhalb des `@keyframes` Attributs können verschiedene CSS-Stile angegeben werden, die bei bestimmten Zeitpunkten der Animation angewendet werden.
```css
@keyframes grow {
0% {
r:40;
}
50% {
r:70;
}
100% {
r:40;
}
}
```
In diesem Beispiel wird eine Animation namens “grow” erstellt, die den Radius (“r”) des Kreises ändert.
3. Verbinden Sie die SVG mit der CSS-Animation:
Schließlich können Sie die Animation auf das SVG anwenden, indem Sie das `animation` Attribut in CSS verwenden.
```css
circle {
animation: grow 2s infinite;
}
```
In diesem Beispiel wird die “grow” Animation auf das `circle` Element im SVG angewendet. Die Animation dauert 2 Sekunden und wird unendlich oft wiederholt.
Zusammen sieht das dann so aus:
```html
Dies ist eine sehr grundlegende Art und Weise, wie Sie mit CSS SVGs animieren können. Sie können viel komplexere Animationen erstellen, indem Sie mehr Zeitpunkte und Stile in Ihren `@keyframes` hinzufügen, oder indem Sie verschiedene Animationen auf verschiedene Elemente in Ihrem SVG anwenden.
