veröffentlicht am: 14. November 2023
HTML: Keyframe Animation erstellen – So gehts
Um in HTML eine Keyframe Animation zu erstellen, gibt es einige einfache Schritte zu befolgen. Hier ist eine Schritt-für-Schritt-Anleitung, um dir dabei zu helfen:
Code Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
#animatedDiv {
width: 100px;
height: 100px;
background-color: red;
animation: myAnimation 2s infinite;
}
@keyframes myAnimation {
0% {background-color: red; transform: translateX(0);}
50% {background-color: blue; transform: translateX(200px);}
100% {background-color: red; transform: translateX(0);}
}
</style>
</head>
<body>
<div id="animatedDiv"></div>
</body>
</html>Ergebnis
Schritt 1: HTML-Grundgerüst erstellen
Erstelle ein einfaches HTML-Grundgerüst, indem du einen doctype festlegst und ein „html“, „head“ und „body“-Element hinzufügst. Innerhalb des „body“-Elements erstellst du ein Element, das animiert werden soll, z.B. ein „div“-Element mit einer bestimmten ID.
Schritt 2: CSS-Styling definieren
Füge innerhalb des „head“-Elements eine „style“-Tag ein und definiere das CSS-Styling für das animierte Element.
- Du kannst beispielsweise die Breite, Höhe, Farben, Schriftarten usw. festlegen. Stelle sicher, dass du der ID des Elements auch einen Anfangs-Zustand zuweist, da dies die Basis für die Animation sein wird.
Schritt 3: Keyframes definieren
Innerhalb des „style“-Tags füge eine „@keyframes“-Regel ein und benenne diese.
- Mit Keyframes können der Animation bestimmte Zustände oder Übergänge zugewiesen werden.
- Du kannst verschiedene Prozentsätze verwenden, um die Animation über die Zeit zu steuern.
- Zum Beispiel: „0%“ für den Ausgangszustand und „100%“ für den Endzustand.
Schritt 4: Keyframe-Regeln festlegen
Innerhalb der „@keyframes“-Regel erstelle einzelne Keyframe-Regeln, um die Animation zu steuern.
Du kannst beispielsweise den Zustand des Elements bei jedem Übergang definieren, indem du CSS-Eigenschaften änderst. Du kannst dabei so viele Keyframes einfügen, wie du möchtest, um die Animation genauer anzupassen.
Schritt 5: Animation zuweisen
Weise der animierten ID das Animationselement zu, indem du die CSS-Eigenschaft „animation“ verwendest. Gib den Namen der Keyframes an, die Dauer der Animation und ob sie sich wiederholen soll. Zum Beispiel: „animation: myAnimation 2s infinite;“
Hat dir der Beitrag gefallen?
Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite
Whatsapp: Ton für Mitteilungen ändern – So gehts
Whatsapp: Verknüpfte Geräte löschen – So gehts
Whatsapp: Telefonnummer ändern – So gehts
Whatsapp: Nachricht löschen – So gehts
Whatsapp: Zuletzt verwendete Smileys löschen
Whatsapp: Chat exportieren – So gehts
Whatsapp: Umfrage erstellen – So gehts
Telegram: Nutzer melden – So gehts
Telegram: Keine Benachrichtigungen – iPhone
Telegram: Bedienungsanleitung – So gehts
Telegram: Gruppe erstellen – So gehts
Telegram: Zugriff auf Kamera erlauben
Telegram: Sticker erstellen – So gehts
Telegram: Zugriff auf Fotos erlauben – So gehts