预设
@keyframes cssap-anim {
from { transform: translateX(0); }
to { transform: translateX(120px); }
}
.preview {
animation: cssap-anim 800ms cubic-bezier(0.42,0,0.58,1) 0ms infinite;
}功能说明
CSS 动画演练场让你在浏览器中实时设计和预览 CSS 动画。选择一个动画属性（移动、缩放、淡入淡出、旋转），调好时长和延迟，选一条内置缓动曲线 - 或者拖动控制点手柄、亲手雕琢你自己的 cubic-bezier - 然后复制精确的 @keyframes 和 animation CSS，直接粘贴进你的项目。所有操作都在客户端运行，你调的任何参数都不会离开你的机器。
使用方法
- 用属性分段控件选择动画内容：Move（
translateX）、Scale、Fade（opacity）或 Spin（rotate）。 - 用数字步进器设置时长 (ms) 和延迟 (ms)。
- 选择一个缓动预设（Linear、Ease、In、Out、In-out），或选择 Custom 打开曲线编辑器。
- 在曲线编辑器中，拖动两个强调色手柄来塑造 cubic-bezier。拖动时蓝色路径和预览会即时更新。
- 在循环选项的 Once 和 Loop 之间切换。
- 随时点击 Play 从头重放预览，或点击 Reset 恢复默认值。
- 从输出面板复制生成的 CSS。
示例
一段利落的淡出（ease-out，250ms，播放一次）
@keyframes cssap-anim {
from { opacity: 1; }
to { opacity: 0.15; }
}
.preview {
animation: cssap-anim 250ms cubic-bezier(0,0,0.58,1) 0ms 1;
}自定义缓动
把缓动设为 Custom，然后将第一个手柄拖向左下方、第二个拖向右上方，得到快速起步、缓缓落定的手感。生成的 cubic-bezier(...) 会随之更新 - 把它复制进你自己的 transition 或 animation 规则即可。
补充说明
- 自定义缓动： 在单位方框内拖动两个强调色手柄来塑造曲线；实时路径和预览会同步追踪你的每一次编辑。
- 即贴即用： 把
cssap-anim关键帧和.preview选择器改名为匹配你自己的标记 - 其余 CSS 均可直接用于生产环境。 - 私密： 整个工具在你的浏览器中运行 - 任何动画参数都不会被发送到服务器。
- 相关工具：
Base64Base64An encoding representing binary data as 64 safe ASCII characters, so it survives transport through text-only channels. It encodes — it does not encrypt.
、JSON Formatter，以及 CSS & Layout 系列的其余工具。