SuperAPI AI 工具集

css-animations

前端与建站

查看项目

更新于 10-16 00:29

技能介绍

用途:通过原生 CSS 关键帧(@keyframes)、过渡(transition)和动画属性在浏览器中实现动画,不依赖 JavaScript 动画库,强调 GPU 加速与性能。

主要能力:涵盖 @keyframes 的 from/to 与百分比写法、动画属性(animation-timing-function、iteration-count、direction、fill-mode、play-state、多重动画)、过渡属性与简写;内置及自定义 cubic-bezier、steps 计时函数;常用动效模式如淡入、底部滑入、缩放入场、脉冲、抖动、旋转、弹跳、骨架屏 shimmer;错峰动画(staggered)与 CSS 自定义属性驱动的动态动画;用 animationend 等事件配合 JavaScript 控制动画。

性能建议:优先动画 transform 与 opacity,避免 width、height、top、left 等触发重排重绘的属性,可用 will-change 提示 GPU 加速。

可访问性:通过 @media (prefers-reduced-motion: reduce) 减少或关闭动画,并支持悬停暂停持续动画。

使用方式:在 CSS 中定义 @keyframes,再为元素应用 animation 或 transition 属性;示例代码见资料正文,此处不逐条抄录。

限制:资料未提供安装命令、依赖要求、收费信息或适用平台说明,以上暂未提供;实际兼容性与效果需以目标浏览器为准。