Ein spezialisierter Animationsadapter, der es HyperFrames ermöglicht, native CSS-Keyframe-Animationen deterministisch zu suchen, anzuhalten und zu steuern.
Installieren & Herunterladen
1. ClawHub CLI
Der schnellste Weg, einen Skill direkt aus der Registry zu installieren.
npx clawhub@latest install css-animations
2. Manuelle Installation
Kopiere den Skill-Ordner an einen dieser Orte
~/.openclaw/skills/ <project>/skills/ Priorität: Workspace > Lokal > Integriert (Bundled)
3. Prompt-Installation
Kopiere diesen Prompt in OpenClaw, um ihn automatisch zu installieren.
Hilf mir, css-animations über Clawhub zu installieren. Falls Clawhub nicht installiert ist, installiere es bitte zuerst (npm i -g clawhub).
Lieber herunterladen?
Hole dir die rohen Skill-Dateien in einem ZIP-Archiv.
Was ist CSS-Animationen für HyperFrames?
Das CSS-Animations-Adapter-Muster für HyperFrames ermöglicht es Entwicklern, CSS-Keyframe-Animationen während der Vorschau- und Rendering-Phasen zu steuern. Diese Funktion macht es einfach, leichte, wiederkehrende Motive, Hintergrundbewegungen, Glanzlichter, Leuchten, Masken und nicht sequenzielle Dekorationen direkt in dynamische Kompositionen zu integrieren, ohne stark auf umfangreiche JS-Frameworks angewiesen zu sein. Die Verwendung von Openclaw Skills für die Vorlagenintegration stellt sicher, dass leistungssensible, CSS-gesteuerte Bewegungen durch die Nutzung nativer Web Animations API (WAAPI)-Wrapper perfekt suchbar bleiben.
Durch das Befolgen dieses strukturierten Ansatzes stellen Sie sicher, dass Ihre Animationen strenge Determinismusregeln einhalten, sodass Rendering-Umgebungen exakte Frames zuverlässig erfassen können. Dies macht Openclaw Skills besonders nützlich für den Aufbau leichter, webbasierter Vorlagen mit hoher Frame-Genauigkeit.
CSS-Animationen für HyperFrames Anwendungsfälle
- Hinzufügen von leichten dekorativen Schleifen mit vordefinierten Wiederholungszahlen zu Benutzeroberflächenvorlagen.
- Einbindung komplexer visueller Masken, Leuchten, Glanzlichter, Körnung und subtiler Parallax-Ebenen.
- Erstellung einfacher, leistungsstarker Übergänge für Einzelelemente ohne den Overhead externer JavaScript-Bibliotheken.
- Sicherstellung, dass komplexe CSS-Stile für Web-Rendering-Plattformen, die über Openclaw Skills integriert sind, hochgradig suchbar und interaktiv bleiben.
So funktioniert CSS-Animationen für HyperFrames
- Elementerkennung: Der Laufzeit-Adapter scannt das DOM des Dokuments während der Initialisierung, um alle Elemente mit einem berechneten
animation-name-Stil zu finden. - WAAPI-Suche: Wenn verfügbar, greift der Adapter über die Web Animations API (WAAPI) auf die nativen
Animation-Handles des Browsers zu, um den Playhead zu steuern. - Fallback-Suche: Wenn native WAAPI-Bindungen nicht verfügbar sind, greift der Adapter darauf zurück, das Element anzuhalten und seinen Laufzeitzustand mithilfe negativer
animation-delay-Offsets zu manipulieren. - Zustandserhaltung: Der Adapter verwendet
animation-fill-mode: both, um sicherzustellen, dass Frames vor und nach der aktiven Bewegung sauber erhalten und gehalten werden.
CSS-Animationen für HyperFrames Einrichtung
Um mit der Implementierung dieser Konfigurationen zu beginnen, schreiben Sie konforme HTML- und CSS-Strukturen und überprüfen Sie dann Ihre Arbeit mit den CLI-Validierungstools. Openclaw Skills empfiehlt die folgenden Implementierungsmuster:
Grundmuster
<div
id="pulse-ring"
class="clip pulse-ring"
data-start="0"
data-duration="4"
data-track-index="2"
></div>
<style>
.pulse-ring {
width: 280px;
height: 280px;
border: 4px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
animation-name: pulse-ring;
animation-duration: 1200ms;
animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
animation-iteration-count: 3;
animation-fill-mode: both;
}
@keyframes pulse-ring {
from {
opacity: 0;
transform: scale(0.82);
}
35% {
opacity: 1;
}
to {
opacity: 0;
transform: scale(1.18);
}
}
</style>
Validierungsbefehle
npx hyperframes lint
npx hyperframes validate
CSS-Animationen für HyperFrames Datenschema & Taxonomie
Der deterministische CSS-Animationsadapter stützt sich auf HTML5 data-attributes und berechnete Stilkonfigurationen, um Zeitachsen präzise zu synchronisieren. Openclaw Skills unterstützt die folgenden Metadatenattribute und Stilkriterien:
| Eigenschaft / Selektor | Beschreibung | Typ / Einschränkungen |
|---|---|---|
data-start |
Der exakte Zeitstempel, an dem die lokale Animation beginnt, dem Clip zu entsprechen | Numerische Zeichenfolge (Sekunden) |
data-duration |
Die Dauergrenzen für die Verfolgung des Lebenszyklus des Elements | Numerische Zeichenfolge (Sekunden) |
data-track-index |
Reihenfolge des Spurrenderings innerhalb des Clip-canvas | Numerische Zeichenfolge |
animation-name |
Identifiziert die Keyframe-Deklaration im Stylesheet | CSS-Bezeichner |
animation-duration |
Dauer der Schleife; muss endlich sein | CSS-Zeiteinheit (z. B. 1200ms) |
animation-iteration-count |
Muss eine endliche Ganzzahl sein (niemals infinite verwenden) | Ganzzahl |
animation-fill-mode |
Konfiguriert auf both, um Grenzrahmen vorher und nachher zu halten |
both |
CSS-Animationen für HyperFrames Erweiterte Funktionen
- Gestaffelte Animationen über CSS-Variablen: Verwenden Sie benutzerdefinierte CSS-Eigenschaften wie
--i, um Elemente dynamisch unter Verwendung von calc-Funktionen zu versetzen. - Deterministische Frame-Suche: Eingebaute Adapter-Kompatibilitäts-Hooks in Openclaw Skills lösen präzise Zeitachsenpositionen auf.
- Native WAAPI-Interoperabilität: Nahtlose Integration mit zugrunde liegenden Web Animations API-Handles für leistungsstarkes GPU-Scrubbing.
SKILL.md
Laden
Verwandte Openclaw-Skills
Chinesischer Versicherungsberater
Eine KI-gestützte, schlanke Proxy-Skill, die Benutzer mit einem entfernten chinesischen Versicherungsberater verbindet, um automatisierte Planung, Produktvergleiche und personalisierte Finanzberatung zu ermöglichen.
Thesis Conclusion Assistant
Ein KI-gestützter Assistent für wissenschaftliches Schreiben, der Abschlusskapitel von Abschlussarbeiten systematisch auf Basis von 11 wissenschaftlichen Standardkomponenten bewertet, strukturiert und umschreibt.
Geburtstags-PPT-Generator
Ein auf python-pptx basierendes Automatisierungstool zur Erstellung schöner, thematischer Kindergarten-Geburtstagspräsentationen und digitaler Fotoalben.
Buch-Lernassistent
Ein KI-gestützter, strukturierter Lese- und Lernbegleiter, der vollständige Buchstrukturen analysiert und komplexe Konzepte mithilfe von Analogien aus der realen Welt aufschlüsselt.
Markdown zu PPTX Slides Konverter (md-to-slides)
Ein automatisiertes Dienstprogramm zum Parsen strukturierter Markdown-Dokumente und deren Kompilierung in vollständig bearbeitbare PPTX-Präsentationen.
Dreamina CLI
Eine lokale CLI-Integration, die es KI-Agenten ermöglicht, Dreamina (即梦) für hochleistungsfähige Bild- und Videogenerierungs-Workflows zu steuern.
Hervorgehoben*
