用途:CSS Animation Creator 是一份面向 CSS 动效创作的技能指引,用于在添加动画、悬停效果、加载状态和页面过渡等场景中提供规范与代码参考。
主要能力:资料涵盖动画设计原则(如将迪士尼十二动画原则应用于 UI,包括挤压拉伸、预备动作、跟随动作等);时长与缓动指南(微交互 100-200ms ease-out,按钮/悬停 150-250ms ease,弹窗打开 200-300ms ease-out,页面过渡 300-500ms ease-in-out,加载循环 1000-2000ms 等);CSS 过渡语法与内置及自定义 cubic-bezier 缓动;Tailwind 过渡工具类;@keyframes 基本语法与完整属性写法;以及淡入淡出、缩放、弹跳、旋转、滑动、注意力吸引、加载动画(旋转、点状、骨架屏、进度条)和微交互(按钮涟漪、悬停、图标动画)等示例。
使用方式:资料以代码片段形式给出,可直接参考其中的 transition、@keyframes、Tailwind className 等写法,例如 transition: opacity 0.3s ease、animation: animationName 1s ease-in-out infinite,以及 hover:scale-105 hover:shadow-lg 等类名组合。
限制与注意:资料强调性能优化应只使用 GPU 加速属性,并尊重无障碍设置,遵循 prefers-reduced-motion;具体运行环境、安装命令、价格与授权信息暂未提供。