CSS 关键帧时间轴编辑器 - 拖拽属性关键点

时长设置：用户可以自定义动画的总时长，支持从0.1秒到10秒的范围。时长设置直接影响动画的播放速度和节奏感。较短的时长适合快速的过渡动画，较长的时长适合舒缓的展示动画。修改时长后，时间轴上的关键帧位置会自动按比例调整，保持动画节奏不变。

播放速度控制：支持0.25x到4x的播放速度调节。慢速播放便于观察动画的细节变化，快速播放可以预览动画在实际应用中的效果。播放速度的调节不影响最终生成的CSS代码，仅用于预览阶段的调试和观察。速度设置会记住用户的偏好，下次打开工具时自动恢复。

添加属性：点击"添加属性"按钮会弹出属性选择菜单，支持五种常用的动画属性：opacity(透明度)、translateX(水平位移)、translateY(垂直位移)、scale(缩放)和rotate(旋转)。每种属性对应一条独立的时间轴轨道，用户可以根据需要添加多个属性，创建复杂的复合动画效果。

属性轨道：每条属性轨道以独立的行显示在时间轴上，轨道上可以放置多个关键帧节点。轨道的视觉设计清晰区分不同的属性类型，每种属性使用不同的颜色标识。用户可以通过拖拽轨道来调整属性的显示顺序，便于对比和管理多个动画属性。

预设动画效果：内置四种预设动画效果，包括淡入淡出、弹跳、左右滑动和脉冲缩放。点击预设按钮会自动添加相应的属性轨道和关键帧节点，用户可以在预设基础上进行自定义调整。预设动画是学习CSS动画制作技巧的好帮手，通过分析预设的关键帧设置可以快速掌握专业动画的制作方法。

拖拽节点：在时间轴上拖拽关键帧节点可以改变其时间位置。拖拽过程中会显示当前节点的时间百分比，帮助用户精确定位。拖拽操作支持吸附功能，当节点接近时间轴上的重要标记点时会自动吸附，确保关键帧位置的准确性。

点击添加节点：在属性轨道的空白位置点击即可在该时间点添加一个新的关键帧节点。新节点会继承相邻节点的属性值，用户可以通过双击编辑来修改节点的具体数值。添加节点后时间轴会自动更新显示。

双击编辑节点：双击时间轴上的关键帧节点会弹出编辑对话框，用户可以在对话框中精确设置该节点的时间位置和属性值。编辑对话框提供数值输入框和滑块两种输入方式，满足不同精度需求的用户。编辑完成后按回车键确认修改。

右键删除节点：在关键帧节点上右键点击会弹出上下文菜单，选择"删除"选项可以移除该节点。删除操作不可撤销，请谨慎操作。删除节点后相邻节点的属性值不会自动变化，时间轴会保持当前状态。

播放头拖拽：时间轴上的播放头指示器可以拖拽到任意位置，实时预览该时刻的动画状态。拖拽播放头可以精确定位动画的某一帧，便于检查动画的中间状态和过渡效果。播放头位置会实时更新预览区域中的元素状态。

播放/暂停控制：点击播放按钮或按空格键可以开始或暂停动画播放。播放过程中播放头会沿时间轴移动，预览区域中的元素会实时显示动画效果。支持循环播放，便于持续观察动画的整体效果。暂停后播放头会停在当前位置，再次播放从该位置继续。

复制CSS代码：点击"复制CSS"按钮会将生成的@keyframes CSS代码复制到系统剪贴板。生成的代码包含完整的动画名称、关键帧百分比和属性值，格式规范、注释清晰。代码可以直接粘贴到CSS或SCSS文件中使用，无需额外的格式调整。支持多种动画属性的代码生成，包括transform和opacity等。