SuperAPI AI 工具集

css-animations

前端与建站

查看项目

更新于 10-16 08:11

技能介绍

用途:在需要轻量、高性能动画且不想引入动画库时使用,适用于简单的悬停/焦点状态过渡、加载旋转器、骨架屏、伪元素动画,以及使用 Tailwind CSS 动画工具的场景。

主要能力:讲解 CSS 过渡(transition)与关键帧动画(@keyframes),包括 animation 各属性、时间函数(ease、cubic-bezier、steps)以及一组常用关键帧库(fadeIn、fadeOut、fadeInUp、fadeInDown、scaleIn、pulse、bounce、spin、shimmer、dotPulse)。支持通过 Tailwind 内置工具类(animate-spin、animate-ping、animate-pulse、animate-bounce)及在 tailwind.config.js 中扩展自定义 animation 与 keyframes。还提供用 CSS 自定义属性实现错峰(stagger)动画,以及 Spinner、Skeleton、Shimmer 等组件模式示例。

使用方式:直接编写 CSS/SCSS 规则或 Tailwind 类即可;文件模式包括含 @keyframes 的 CSS、含动画的 SCSS、含 Tailwind 动画类的 TSX,以及含自定义动画的 tailwind.config.js。性能建议:优先动画 transform 与 opacity 等 GPU 加速属性,避免动画 width、height、top、left、margin、padding,必要时使用 will-change,并配合 prefers-reduced-motion 做降级。

限制:主要面向纯 CSS 动画;若需 JavaScript 控制、弹簧物理或滚动触发动画,需参考相关的其它技能。费用、价格、平台支持等信息暂未提供。