HyperFrames가 기본 CSS 키프레임 애니메이션을 결정론적으로 검색, 일시 중지 및 찾을 수 있게 해주는 특수 애니메이션 어댑터입니다.
설치 및 다운로드
1. ClawHub CLI
레지스트리에서 스킬을 바로 설치하는 가장 빠른 방법입니다.
npx clawhub@latest install css-animations
2. 수동 설치
스킬 폴더를 다음 위치 중 하나로 복사하세요
~/.openclaw/skills/ <project>/skills/ 우선순위: 워크스페이스 > 로컬 > 번들
3. 프롬프트 설치
이 프롬프트를 OpenClaw에 복사하면 자동으로 설치됩니다.
Clawhub를 사용해서 css-animations 설치를 도와줘. Clawhub가 설치되어 있지 않다면 먼저 설치해 줘 (npm i -g clawhub).
다운로드를 원하시나요?
ZIP 아카이브 형태의 원본 스킬 파일을 받으세요.
HyperFrames용 CSS 애니메이션란 무엇인가요?
HyperFrames를 위한 CSS 애니메이션 어댑터 패턴을 사용하면 개발자가 미리 보기 및 렌더링 단계에서 CSS 키프레임 애니메이션을 제어할 수 있습니다. 이 기능을 사용하면 대규모 JS 프레임워크에 크게 의존하지 않고도 가벼운 반복 모티프, 배경 모션, 반짝임, 빛, 마스크 및 비순차적 장식을 동적 구성에 직접 쉽게 통합할 수 있습니다. 템플릿 통합을 위해 Openclaw Skills를 활용하면 기본 Web Animations API (WAAPI) 래퍼를 활용하여 성능에 민감한 CSS 기반 모션이 완벽하게 탐색 가능한 상태로 유지됩니다.
이 구조화된 접근 방식을 따르면 애니메이션이 엄격한 결정론 규칙을 준수하도록 보장하여 렌더링 환경이 정확한 프레임을 안정적으로 캡처할 수 있습니다. 이는 Openclaw Skills를 높은 프레임 정확도를 가진 가벼운 웹 기반 템플릿을 구축하는 데 특히 유용하게 만듭니다.
HyperFrames용 CSS 애니메이션 활용 사례
- 사용자 인터페이스 템플릿에 미리 정의된 반복 횟수가 있는 가벼운 장식 루프 추가.
- 복잡한 시각적 마스크, 빛, 반짝임, 그레인 및 미묘한 시차 레이어 통합.
- 외부 JavaScript 라이브러리의 오버헤드 없이 간단하고 성능이 뛰어난 단일 요소 진입 전환 생성.
- Openclaw Skills를 통해 통합된 웹 렌더링 플랫폼에서 복잡한 CSS 스타일이 매우 잘 탐색 가능하고 상호 작용 가능하도록 보장.
HyperFrames용 CSS 애니메이션 작동 원리
- 요소 발견: 런타임 어댑터는 초기화 중에 문서의 DOM을 스캔하여 계산된
animation-name스타일을 가진 모든 요소를 발견합니다. - WAAPI 탐색: 사용 가능한 경우, 어댑터는 Web Animations API (WAAPI)를 통해 브라우저의 기본
Animation핸들을 가져와 재생 헤드를 스크럽합니다. - 대체 탐색: 기본 WAAPI 바인딩을 사용할 수 없는 경우, 어댑터는 요소를 일시 중지하고 음수
animation-delay오프셋을 사용하여 런타임 상태를 조작하는 방식으로 대체합니다. - 상태 보존: 어댑터는
animation-fill-mode: both를 사용하여 활성 모션이 실행되기 전과 후에 프레임이 깔끔하게 보존되고 유지되도록 합니다.
HyperFrames용 CSS 애니메이션 설정 가이드
이러한 구성을 구현하려면 규정 준수 HTML 및 CSS 구조를 작성한 다음 CLI 검증 도구를 사용하여 작업을 감사하십시오. Openclaw Skills는 다음과 같은 구현 패턴을 권장합니다:
기본 패턴
<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>
검증 명령
npx hyperframes lint
npx hyperframes validate
HyperFrames용 CSS 애니메이션 데이터 스키마 및 분류 체계
결정론적 CSS 애니메이션 어댑터는 HTML5 data-attributes 및 계산된 스타일 구성에 의존하여 타임라인을 정확하게 동기화합니다. Openclaw Skills는 다음과 같은 메타데이터 속성 및 스타일 기준을 지원합니다:
| 속성 / 선택기 | 설명 | 유형 / 제약 조건 |
|---|---|---|
data-start |
로컬 애니메이션이 클립과 일치하기 시작하는 정확한 타임스탬프 | 숫자 문자열 (초) |
data-duration |
요소의 수명 주기를 추적하기 위한 지속 시간 경계 | 숫자 문자열 (초) |
data-track-index |
클립 canvas 내의 트랙 렌더링 순서 | 숫자 문자열 |
animation-name |
스타일시트의 키프레임 선언 식별 | CSS 식별자 |
animation-duration |
루프의 지속 시간; 유한해야 함 | CSS 시간 단위 (예: 1200ms) |
animation-iteration-count |
유한한 정수여야 함 (infinite 사용 금지) | 정수 |
animation-fill-mode |
전후 경계 프레임을 유지하기 위해 both로 구성 |
both |
HyperFrames용 CSS 애니메이션 고급 기능
- CSS 변수를 통한 엇갈린 애니메이션: calc 함수를 활용하여 요소를 동적으로 오프셋하려면
--i와 같은 CSS 사용자 지정 속성을 사용하세요. - 결정론적 프레임 탐색: Openclaw Skills의 기본 제공 어댑터 호환성 후크는 정확한 타임라인 위치를 해결합니다.
- 기본 WAAPI 상호 운용성: 고성능 GPU 스크러빙을 위해 기본 Web Animations API 핸들과 원활하게 통합됩니다.
SKILL.md
로드 중
관련 Openclaw 스킬
중국 보험 자문
사용자를 원격 중국 보험 자문가와 연결하여 자동화된 설계, 상품 비교 및 개인화된 재무 조언을 제공하는 AI 기반 경량 proxy 스킬입니다.
논문 결론 어시스턴트
11가지 표준 학술 구성 요소를 기반으로 논문 결론 챕터를 체계적으로 평가, 구조화 및 재작성하는 AI 기반 학술 글쓰기 도우미입니다.
생일 PPT 생성기
python-pptx 기반 자동화 도구로, 아름답고 테마가 있는 유치원 생일 슬라이드 프레젠테이션과 디지털 포토 앨범을 생성합니다.
도서 학습 어시스턴트
완전한 도서 구조를 분석하고 실제 유추를 사용하여 복잡한 개념을 분해하는 AI 기반의 구조화된 독서 및 학습 동반자입니다.
Markdown to PPTX 슬라이드 변환기 (md-to-slides)
구조화된 Markdown 문서를 파싱하고 완전히 편집 가능한 PPTX 프레젠테이션으로 컴파일하는 자동화 유틸리티입니다.
Dreamina CLI
AI 에이전트가 고성능 이미지 및 비디오 생성 워크플로우를 위해 Dreamina (即梦)를 제어할 수 있도록 지원하는 로컬 CLI 통합입니다.
추천*
