rendering-animate-svg

SKILL.md

Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a and animate the wrapper instead. Important for 8-bit components with pixel art icons and animations.

This applies to all CSS transforms and transitions (transform, opacity, translate, scale, rotate). The wrapper div allows browsers to use GPU acceleration for smoother animations, which is especially noticeable for retro pixel art animations.

하드웨어 가속을 활성화하려면 애니메이션 SVG 요소를 div로 래핑하세요. 특히 픽셀 아트 애니메이션이 포함된 8비트 복고풍 구성 요소에서 SVG 아이콘 또는 요소에 애니메이션을 적용할 때 적용됩니다. 출처: theorcdev/8bitcn-ui.

터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/theorcdev/8bitcn-ui --skill rendering-animate-svg 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다

원본 보기