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?

    html        html keyframes   
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
smileys

Beiträge die dich Interessieren könnten 😌

Whatsapp: Ton für Mitteilungen ändern – So gehts

Der Standard-Ton für Mitteilungen kann mit der Zeit jedoch etwas langweilig werden. Wenn du also...

Whatsapp: Verknüpfte Geräte löschen – So gehts

Oftmals haben wir jedoch mehr als ein Gerät, das mit WhatsApp verbunden ist. Vielleicht hast...

Whatsapp: Telefonnummer ändern – So gehts

Sei es aufgrund eines Anbieterwechsels oder einfach nur aus privaten Gründen. Wenn du dich fragst...

Whatsapp: Nachricht löschen – So gehts

Manchmal kann es jedoch vorkommen, dass wir eine Nachricht versehentlich senden oder dass wir eine...

Whatsapp: Zuletzt verwendete Smileys löschen

Beim Verfassen von Nachrichten verwenden wir oft Emojis oder Smileys, um unsere Gefühle auszudrücken. Manchmal...

Whatsapp: Chat exportieren – So gehts

Manchmal möchten wir jedoch wichtige Chats speichern oder sichern, sei es aus sentimentalen Gründen oder...

Whatsapp: Umfrage erstellen – So gehts

Eine tolle Möglichkeit, um schnell und einfach eine Meinungsumfrage unter deinen Kontakten zu starten, ist...

Telegram: Nutzer melden – So gehts

Es ist wichtig, solche Vorfälle zu melden, um eine angenehme und respektvolle Umgebung für alle...

Telegram: Keine Benachrichtigungen – iPhone

Es kann frustrierend sein, wenn du keine Telegram-Benachrichtigungen auf deinem iPhone erhältst. Glücklicherweise gibt es...

Telegram: Bedienungsanleitung – So gehts

In diesem Beitrag werde ich dir eine Schritt-für-Schritt-Anleitung geben, wie du die Telegram Bedienungsanleitung finden...

Telegram: Gruppe erstellen – So gehts

Das Erstellen einer Gruppe in Telegram kann sehr nützlich sein, wenn du mit einer größeren...

Telegram: Zugriff auf Kamera erlauben

Wenn du in Telegram den Zugriff auf deine Kamera erlauben möchtest, kannst du ganz einfach...

Telegram: Sticker erstellen – So gehts

Mit Telegramm, kannst du sogar deine eigenen individuellen Sticker erstellen. In dieser Schritt-für-Schritt Anleitung zeige...

Telegram: Zugriff auf Fotos erlauben – So gehts

Um in Telegramm den Zugriff auf Fotos zu erlauben, gibt es eine einfache Schritt-für-Schritt Anleitung...

Telegram: Zugriff auf Kontakte verweigern

Obwohl es viele Funktionen bietet, möchten einige Benutzer möglicherweise den Zugriff auf ihre Kontakte in...