关键帧
提示：百分比越小越先执行；属性可直接填写，如
opacity、transform、background-color 等。动画配置
实时预览
预览
使用说明
- 在“动画配置”中设置动画
名称/时长/缓动/延迟/次数/方向/填充/状态。 - 在“关键帧”区域添加帧（➕ 添加关键帧），每帧可➕多条属性（如
opacity、transform）。可复制、上移/下移或删除帧。 - 需要常见效果时，先选“动画预设”，再点“应用预设”，会自动填充参数与关键帧。
- 点击“⚙️ 生成CSS”在下方得到
@keyframes与animation示例，支持“📋 复制”和“💾 下载”。 - 将生成的
@keyframes贴到你的样式表，并给目标元素添加animation即可使用。 - 使用“🧾 导出JSON / 📥 导入JSON”保存或恢复完整配置，便于共享或迭代。
- 右侧“实时预览”中可“播放/暂停/重置”，并可切换形状与主色，快速观察效果。
- 点击“🌓 主题”切换浅/深主题，系统会记忆你的偏好。
- 移动端友好：在手机上布局会自动堆叠，所有控件可触控编辑。
提示：
- 若选择“cubic-bezier(自定义)”，在下方文本框填写
cubic-bezier(x1,y1,x2,y2)。
- 设置 次数 为 infinite 实现无限循环；时间线上的标记表示每个关键帧的百分比位置。
@keyframes example {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
.your-target {
animation: example 1s ease 0s 1 normal both;
}