可视化构建 CSS 动画，支持关键帧时间线、实时预览和预设动画
CSS 工具
关于此工具
CSS 动画构建器让你通过直观的可视化编辑器创建 CSS 关键帧动画。选择 弹跳、淡入淡出 等预设动画，自定义 transform、opacity 和 color 属性的关键帧，调整时间和方向，并将生成的 CSS 代码直接复制到项目中。
主要功能
- 可视化关键帧动画编辑器，支持添加和删除
- 实时动画预览，带播放按钮
- 预设动画：弹跳、淡入淡出、脉冲、抖动、自定义
- 可配置持续时间、时间函数、迭代次数和方向
- 多种可动画属性：transform、opacity、color 等
- 一键复制生成的 CSS 代码
使用场景
- 创建网站进入和退出动画
- 构建加载旋转器和活动指示器
- 设计交互式悬停和聚焦动画
- 在手动编写 CSS 之前制作动画原型
- 为设计系统生成可复用的动画 CSS
css
animation
keyframes
常见问题
什么是 CSS 动画构建器？
CSS 动画构建器是一款在线 CSS 工具，支持通过关键帧时间线、实时预览和预设动画可视化构建 CSS 动画。它完全在浏览器中运行，不会向任何服务器发送数据。
有哪些预设动画可用？
工具包含 弹跳、淡入淡出、脉冲、抖动 和 自定义 预设动画。你可以选择任何预设并进一步自定义关键帧、时间和方向。
可以动画化哪些 CSS 属性？
你可以动画化 transform、opacity、background-color、color、left 和 top 属性。每个关键帧都可以选择属性并设置其值。
CSS 动画构建器免费使用吗？
是的，CSS 动画构建器完全免费使用。没有任何隐藏费用、订阅或限制。所有功能对所有人开放。
可以在手机上使用 CSS 动画构建器吗？
是的，CSS 动画构建器完全响应式设计，支持所有设备，包括智能手机、平板电脑和桌面电脑。