Die Erstellung von Animationen mit CSS und HTML beinhaltet im Allgemeinen die Verwendung von CSS-Animationen oder @keyframes-Regel, die es Ihnen ermöglicht, Animationen zu erstellen, indem Sie Ziele für Elternelemente setzen und die endgültige Darstellung des Elements bestimmen.
Hier ist ein einfacher Schritt-für-Schritt-Prozess, wie Sie einen Animationseffekt mit CSS und HTML erstellen können:
1. Zuerst müssen Sie das HTML-Element erstellen, das Sie animieren möchten. Zum Beispiel ein div-Element mit der Klasse “box”:
HTML:
```html
2. Als nächstes müssen Sie die CSS-Regeln für diese Box erstellen. Dazu gehören Größe, Position, Hintergrundfarbe etc.
CSS:
```css
.box {
width: 100px;
height: 100px;
background-color: red;
}
```
3. Jetzt können Sie die Animation erstellen. Dafür verwenden Sie den @keyframes Befehl in CSS. In diesem Beispiel erstellen wir eine einfache Animation, bei der die Box von links nach rechts über den Bildschirm wandert:
CSS:
```css
@keyframes moveBox {
0% {
margin-left: 0;
}
100% {
margin-left: 100%;
}
}
```
4. Schließlich müssen Sie die erstellte Animation der Box zuweisen. Das machen Sie mit der animation Eigenschaft in der Klasse der Box:
CSS:
```css
.box {
width: 100px;
height: 100px;
background-color: red;
animation: moveBox 5s infinite;
}
```
Das war’s! Sie haben eine einfache Animation mit CSS und HTML erstellt. Das oben gezeigte Beispiel führt dazu, dass die rote Box kontinuierlich von links nach rechts über den Bildschirm bewegt wird.
Wenn Sie komplexere Animationen erstellen möchten, können Sie mehr Schlüsselbilder (Keyframes) hinzufügen und verschiedene CSS-Eigenschaften animieren.
