Un adaptador de animación especializado que permite a HyperFrames buscar, pausar y encontrar animaciones nativas de keyframe CSS de forma determinística.
Instalar y Descargar
1. ClawHub CLI
La forma más rápida de instalar una habilidad directamente desde el registro.
npx clawhub@latest install css-animations
2. Instalación manual
Copia la carpeta de la habilidad a una de estas ubicaciones
~/.openclaw/skills/ <project>/skills/ Prioridad: Espacio de trabajo > Local > Integrado
3. Instalación del prompt
Copia este prompt en OpenClaw para instalarlo automáticamente.
Ayúdame a instalar css-animations usando Clawhub. Si Clawhub no está instalado, instálalo primero (npm i -g clawhub).
¿Prefieres descargar?
Obtén los archivos originales de la habilidad en un archivo ZIP.
¿Qué es Animaciones CSS para HyperFrames?
El patrón de adaptador de animaciones CSS para HyperFrames permite a los desarrolladores controlar las animaciones de keyframe CSS durante las etapas de vista previa y renderizado. Esta capacidad facilita la integración de motivos repetidos ligeros, movimiento de fondo, destellos, brillos, máscaras y decoraciones no secuenciales directamente en composiciones dinámicas sin depender pesadamente de grandes frameworks JS. Utilizar Openclaw Skills para la integración de plantillas asegura que los movimientos basados en CSS sensibles al rendimiento sigan siendo perfectamente buscables al aprovechar los wrappers nativos de la Web Animations API (WAAPI).
Al seguir este enfoque estructurado, garantiza que sus animaciones cumplan con reglas estrictas de determinismo, permitiendo a los entornos de renderizado capturar fotogramas exactos de manera confiable. Esto hace que Openclaw Skills sea particularmente útil para construir plantillas ligeras basadas en web con alta precisión de fotogramas.
Casos de uso de Animaciones CSS para HyperFrames
- Adición de bucles decorativos ligeros con conteos de repetición predefinidos a plantillas de interfaz de usuario.
- Incorporación de máscaras visuales complejas, brillos, destellos, grano y capas de paralaje sutiles.
- Creación de transiciones de entrada de un solo elemento simples y de alto rendimiento sin la sobrecarga de librerías JavaScript externas.
- Asegurar que los estilos CSS complejos sigan siendo altamente buscables e interactivos para plataformas de renderizado Web integradas a través de Openclaw Skills.
Cómo funciona Animaciones CSS para HyperFrames
- Descubrimiento de Elementos: El adaptador en tiempo de ejecución escanea el DOM del documento durante la inicialización para descubrir todos los elementos con un estilo
animation-namecalculado. - Búsqueda vía WAAPI: Cuando está disponible, el adaptador captura los handles de
Animationnativos del navegador mediante la Web Animations API (WAAPI) para controlar la reproducción. - Búsqueda de Fallback: Si los bindings nativos de WAAPI no están disponibles, el adaptador recurre a pausar el elemento y manipular su estado de tiempo de ejecución utilizando offsets de
animation-delaynegativos. - Preservación de Estado: El adaptador utiliza
animation-fill-mode: bothpara garantizar que los fotogramas se preserven y mantengan limpios antes y después de que se ejecute el movimiento activo.
Configuración de Animaciones CSS para HyperFrames
Para comenzar a implementar estas configuraciones, escriba estructuras HTML y CSS compatibles y luego audite su trabajo utilizando las herramientas de validación CLI. Openclaw Skills recomienda los siguientes patrones de implementación:
Patrón Básico
<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>
Comandos de validación
npx hyperframes lint
npx hyperframes validate
Esquema de datos y taxonomía de Animaciones CSS para HyperFrames
El adaptador de animación CSS determinístico depende de data-attributes de HTML5 y configuraciones de estilo calculadas para sincronizar las líneas de tiempo con precisión. Openclaw Skills admite los siguientes atributos de metadatos y criterios de estilo:
| Propiedad / Selector | Descripción | Tipo / Restricciones |
|---|---|---|
data-start |
La marca de tiempo exacta donde la animación local comienza a coincidir con el clip | Cadena numérica (segundos) |
data-duration |
Los límites de duración para rastrear el ciclo de vida del elemento | Cadena numérica (segundos) |
data-track-index |
Orden de renderizado de la pista dentro del canvas del clip | Cadena numérica |
animation-name |
Identifica la declaración de keyframe en la hoja de estilos | Identificador CSS |
animation-duration |
Duración del bucle; debe ser finita | Unidad de tiempo CSS (ej: 1200ms) |
animation-iteration-count |
Debe ser un número entero finito (nunca usar infinite) | Entero |
animation-fill-mode |
Configurado a both para mantener fotogramas de borde antes y después |
both |
Funciones avanzadas de Animaciones CSS para HyperFrames
- Animaciones Escalonadas vía Variables CSS: Use propiedades personalizadas de CSS como
--ipara compensar elementos dinámicamente utilizando funciones calc. - Búsqueda de Fotogramas Determinística: Los hooks de compatibilidad de adaptador integrados en Openclaw Skills resuelven ubicaciones precisas en la línea de tiempo.
- Interoperabilidad Nativa WAAPI: Integración perfecta con handles subyacentes de la Web Animations API para scrubbing de GPU de alto rendimiento.
SKILL.md
Cargando
Habilidades relacionadas de Openclaw
Asesor de Seguros de China
Una skill de proxy ligera impulsada por IA que conecta a los usuarios con un asesor de seguros chino remoto para la planificación automatizada, comparación de productos y asesoramiento financiero personalizado.
Asistente de Conclusión de Tesis
Un asistente de escritura académica con IA que evalúa, estructura y reescribe sistemáticamente capítulos de conclusión de tesis basados en 11 componentes académicos estándar.
Generador de PPT de Cumpleaños
Una herramienta de automatización basada en python-pptx para generar hermosas presentaciones de diapositivas de cumpleaños para jardín de infantes y álbumes de fotos digitales temáticos.
Asistente de Aprendizaje de Libros
Un compañero de lectura y aprendizaje estructurado impulsado por IA que analiza estructuras completas de libros y desglosa conceptos complejos utilizando analogías del mundo real.
Convertidor de Markdown a PPTX (md-to-slides)
Un utilitario automatizado para analizar documentos Markdown estructurados y compilarlos en presentaciones PPTX totalmente editables.
Dreamina CLI
Una integración CLI local que permite a los agentes de IA comandar Dreamina (即梦) para flujos de trabajo de generación de imágenes y videos de alto rendimiento.
Presentado*
