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 中以啟用硬件加速。在對 SVG 圖標或元素進行動畫處理時應用，尤其是在具有像素藝術動畫的 8 位複古組件中。 來源：theorcdev/8bitcn-ui。

開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/theorcdev/8bitcn-ui --skill rendering-animate-svg 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code 或 Cursor 中使用

查看原文