A specialized animation adapter that enables HyperFrames to search, pause, and seek native CSS keyframe animations deterministically.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install css-animations
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install css-animations using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is CSS Animations for HyperFrames?
The CSS animations adapter pattern for HyperFrames allows developers to control CSS keyframe animations during preview and rendering stages. This capability makes it simple to integrate lightweight repeated motifs, background motion, shimmers, glows, masks, and non-sequenced decoration directly into dynamic compositions without relying heavily on massive JS frameworks. Utilizing Openclaw Skills for template integration ensures that performance-sensitive, CSS-driven motion remains perfectly seekable by leveraging native Web Animations API (WAAPI) wrappers.
By following this structured approach, you ensure your animations comply with strict determinism rules, allowing rendering environments to capture exact frames reliably. This makes Openclaw Skills particularly useful for building lightweight web-based templates with high frame-accuracy.
CSS Animations for HyperFrames Use Cases
- Adding lightweight decorative loops with predefined repeat counts to user interface templates.
- Incorporating complex visual masks, glows, shimmers, grain, and subtle parallax layers.
- Creating simple, high-performance one-element entrance transitions without overhead from external JavaScript libraries.
- Ensuring complex CSS styles remain highly seekable and interactive for web rendering platforms integrated through Openclaw Skills.
How CSS Animations for HyperFrames Works
- Element Discovery: The runtime adapter scans the document's DOM during initialization to discover all elements with a computed
animation-namestyle. - WAAPI Seeking: When available, the adapter grabs the browser's native
Animationhandles via the Web Animations API (WAAPI) to scrub the playhead. - Fallback Seeking: If native WAAPI bindings are unavailable, the adapter falls back to pausing the element and manipulating its runtime state using negative
animation-delayoffsets. - State Preservation: The adapter utilizes
animation-fill-mode: bothto ensure that frames are preserved and held cleanly before and after active motion runs.
CSS Animations for HyperFrames Setup
To begin implementing these configurations, write compliant HTML and CSS structures, and then audit your work using the CLI validation tools. Openclaw Skills recommend the following implementation patterns:
Basic Pattern
<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>
Validation commands
npx hyperframes lint
npx hyperframes validate
CSS Animations for HyperFrames Data Schema & Taxonomy
The deterministic CSS animation adapter relies on HTML5 data-attributes and calculated style configurations to synchronize timelines accurately. Openclaw Skills support the following metadata attributes and style criteria:
| Property / Selector | Description | Type / Constraints |
|---|---|---|
data-start |
The exact timestamp where local animation starts matching the clip | Numeric string (seconds) |
data-duration |
The duration bounds for tracking the element's lifecycle | Numeric string (seconds) |
data-track-index |
Order of track rendering within the clip canvas | Numeric string |
animation-name |
Identifies the keyframe declaration in stylesheet | CSS Identifier |
animation-duration |
Duration of the loop; must be finite | CSS Time unit (e.g., 1200ms) |
animation-iteration-count |
Must be a finite integer (never use infinite) | Integer |
animation-fill-mode |
Configured to both to hold boundary frames before and after |
both |
CSS Animations for HyperFrames Advanced Features
- Staggered Animations via CSS Variables: Use CSS custom properties like
--ito dynamically offset elements utilizing calc functions. - Deterministic Frame Seeking: Built-in adapter compatibility hooks in Openclaw Skills resolve precise timeline locations.
- Native WAAPI Interoperability: Seamless integration with underlying Web Animations API handles for high-performance GPU scrubbing.
SKILL.md
Loading
Related Openclaw Skills
China Insurance Advisor
An AI-driven thin proxy skill that connects users with a remote Chinese insurance advisor for automated planning, product comparison, and personalized financial advice.
Thesis Conclusion Assistant
An AI-powered academic writing helper that systematically evaluates, structures, and rewrites thesis conclusion chapters based on 11 standard scholarly components.
Birthday PPT Generator
A python-pptx based automation tool to generate beautiful, themed kindergarten birthday slide presentations and digital photo albums.
Book Learning Assistant
An AI-powered structured reading and learning companion that analyzes complete book structures and breaks down complex concepts using real-world analogies.
Markdown to PPTX Slides Converter (md-to-slides)
An automated utility to parse structured Markdown documents and compile them into fully editable PPTX presentations.
Dreamina CLI
A local CLI integration that enables AI agents to command Dreamina (即梦) for high-performance image and video generation workflows.