Un adaptateur d'animation spécialisé qui permet à HyperFrames de rechercher, mettre en pause et lire les animations d'images clés CSS natives de manière déterministe.
Installer & Télécharger
1. ClawHub CLI
Le moyen le plus rapide d'installer une compétence directement depuis le registre.
npx clawhub@latest install css-animations
2. Installation manuelle
Copiez le dossier de la compétence dans l'un de ces emplacements
~/.openclaw/skills/ <project>/skills/ Priorité : Espace de travail > Local > Intégré
3. Installation du prompt
Copiez ce prompt dans OpenClaw pour l'installer automatiquement.
Aide-moi à installer css-animations via Clawhub. Si Clawhub n'est pas installé, installe-le d'abord (npm i -g clawhub).
Vous préférez télécharger ?
Obtenez les fichiers bruts de la compétence dans une archive ZIP.
Qu'est-ce que Animations CSS pour HyperFrames ?
Le modèle d'adaptateur d'animations CSS pour HyperFrames permet aux développeurs de contrôler les animations d'images clés CSS pendant les phases de prévisualisation et de rendu. Cette capacité facilite l'intégration de motifs répétitifs légers, de mouvements d'arrière-plan, de reflets, de lueurs, de masques et de décorations non séquentielles directement dans des compositions dynamiques sans dépendre lourdement de grands frameworks JS. L'utilisation d'Openclaw Skills pour l'intégration de modèles garantit que les mouvements pilotés par CSS sensibles aux performances restent parfaitement consultables en tirant parti des wrappers natifs de la Web Animations API (WAAPI).
En suivant cette approche structurée, vous garantissez que vos animations respectent des règles de déterminisme strictes, permettant aux environnements de rendu de capturer des images exactes de manière fiable. Cela rend Openclaw Skills particulièrement utile pour créer des modèles légers basés sur le Web avec une précision d'image élevée.
Cas d'utilisation de Animations CSS pour HyperFrames
- Ajout de boucles décoratives légères avec des nombres de répétitions prédéfinis aux modèles d'interface utilisateur.
- Intégration de masques visuels complexes, de lueurs, de reflets, de grain et de couches de parallaxe subtiles.
- Création de transitions d'entrée à élément unique simples et performantes sans la surcharge des bibliothèques JavaScript externes.
- Garantie que les styles CSS complexes restent hautement consultables et interactifs pour les plates-formes de rendu Web intégrées via Openclaw Skills.
Comment fonctionne Animations CSS pour HyperFrames
- Découverte des éléments : L'adaptateur d'exécution scanne le DOM du document lors de l'initialisation pour découvrir tous les éléments avec un style
animation-namecalculé. - Recherche via WAAPI : Lorsqu'elle est disponible, l'adaptateur récupère les handles
Animationnatifs du navigateur via la Web Animations API (WAAPI) pour contrôler la tête de lecture. - Recherche de repli : Si les liaisons WAAPI natives ne sont pas disponibles, l'adaptateur se replie sur la mise en pause de l'élément et la manipulation de son état d'exécution à l'aide de décalages
animation-delaynégatifs. - Préservation de l'état : L'adaptateur utilise
animation-fill-mode: bothpour garantir que les images sont préservées et maintenues proprement avant et après l'exécution du mouvement actif.
Configuration de Animations CSS pour HyperFrames
Pour commencer à implémenter ces configurations, écrivez des structures HTML et CSS conformes, puis auditez votre travail à l'aide des outils de validation CLI. Openclaw Skills recommande les modèles d'implémentation suivants :
Modèle de base
<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>
Commandes de validation
npx hyperframes lint
npx hyperframes validate
Schéma de données et taxonomie de Animations CSS pour HyperFrames
L'adaptateur d'animation CSS déterministe repose sur des data-attributes HTML5 et des configurations de style calculées pour synchroniser les chronologies avec précision. Openclaw Skills prend en charge les attributs de métadonnées et les critères de style suivants :
| Propriété / Sélecteur | Description | Type / Contraintes |
|---|---|---|
data-start |
L'horodatage exact où l'animation locale commence à correspondre au clip | Chaîne numérique (secondes) |
data-duration |
Les limites de durée pour le suivi du cycle de vie de l'élément | Chaîne numérique (secondes) |
data-track-index |
Ordre de rendu de la piste dans le canvas du clip | Chaîne numérique |
animation-name |
Identifie la déclaration d'image clé dans la feuille de style | Identifiant CSS |
animation-duration |
Durée de la boucle ; doit être finie | Unité de temps CSS (ex : 1200ms) |
animation-iteration-count |
Doit être un entier fini (ne jamais utiliser infinite) | Entier |
animation-fill-mode |
Configuré sur both pour maintenir les images de bordure avant et après |
both |
Fonctionnalités avancées de Animations CSS pour HyperFrames
- Animations décalées via variables CSS : Utilisez des propriétés personnalisées CSS comme
--ipour décaler dynamiquement les éléments en utilisant des fonctions calc. - Recherche d'images déterministe : Les hooks de compatibilité d'adaptateur intégrés dans Openclaw Skills résolvent les positions précises de la chronologie.
- Interopérabilité WAAPI native : Intégration transparente avec les handles sous-jacents de la Web Animations API pour un scrubbing GPU haute performance.
SKILL.md
Chargement
Compétences Openclaw associées
Conseiller en Assurance Chine
Une skill proxy légère pilotée par IA qui connecte les utilisateurs à un conseiller en assurance chinois à distance pour une planification automatisée, une comparaison de produits et des conseils financiers personnalisés.
Thesis Conclusion Assistant
Un assistant de rédaction académique alimenté par l'IA qui évalue, structure et réécrit systématiquement les chapitres de conclusion de thèse sur la base de 11 composants académiques standard.
Générateur de PPT d'anniversaire
Un outil d'automatisation basé sur python-pptx pour générer de belles présentations de diapositives d'anniversaire pour la maternelle et des albums photo numériques thématiques.
Assistant d'apprentissage de livres
Un compagnon de lecture et d'apprentissage structuré alimenté par l'IA qui analyse des structures complètes de livres et décompose des concepts complexes en utilisant des analogies du monde réel.
Convertisseur Markdown vers PPTX (md-to-slides)
Un utilitaire automatisé pour analyser des documents Markdown structurés et les compiler en présentations PPTX entièrement modifiables.
Dreamina CLI
Une intégration CLI locale qui permet aux agents IA de commander Dreamina (即梦) pour des flux de travail de génération d'images et de vidéos haute performance.
En vedette*
