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

打开CSS关键帧时间轴编辑器后，首先需要设置动画的基础参数。在工具界面的顶部区域，您可以看到"动画时长"和"播放速度"两个设置项。动画时长决定了动画从开始到结束的总时间，建议根据动画的用途选择合适的时长：简单的过渡动画通常在0.3到0.5秒之间，复杂的展示动画可以设置为1到3秒。播放速度控制预览时的播放快慢，不影响最终生成的代码。

设置完基础参数后，您可以选择从预设动画开始，或者手动添加属性轨道。如果您是初次使用，建议先尝试预设动画，了解工具的基本操作方式。点击预设按钮后，工具会自动添加相应的属性轨道和关键帧节点，您可以通过播放预览来观察动画效果，然后在此基础上进行自定义调整。

如果要手动创建动画，首先需要添加动画属性。点击"添加属性"按钮，在弹出的属性选择菜单中选择需要动画化的CSS属性。工具支持五种常用属性：opacity控制元素透明度，translateX控制水平位移，translateY控制垂直位移，scale控制缩放比例，rotate控制旋转角度。

每个属性对应一条独立的时间轴轨道。您可以根据需要添加一个或多个属性，创建复合动画效果。例如，要创建一个淡入效果，只需要添加opacity属性；要创建一个弹跳效果，需要同时添加translateY和scale属性。添加属性后，时间轴上会出现对应的轨道行，您可以在轨道上添加关键帧节点。

在属性轨道上添加关键帧节点是动画制作的核心步骤。在轨道的空白位置点击即可在该时间点添加一个新的关键帧节点。新节点会以圆点形式显示在时间轴上，默认放置在点击位置的对应时间点。

建议至少添加两个关键帧节点：一个在动画开始位置(0%)，一个在动画结束位置(100%)。对于更复杂的动画，您可以在中间位置添加额外的关键帧节点来控制动画的过渡细节。例如，要创建一个弹跳动画，您需要在0%、50%和100%位置分别设置不同的translateY值来模拟弹跳的上升和下降过程。

添加节点后，可以通过拖拽来调整其时间位置。拖拽过程中会显示当前节点的时间百分比，帮助您精确定位。当节点接近时间轴上的重要标记点(如0%、25%、50%、75%、100%)时会自动吸附，确保关键帧位置的准确性。

添加关键帧节点后，需要为每个节点设置具体的属性值。双击时间轴上的关键帧节点会弹出编辑对话框。对话框中显示当前节点的时间位置和属性值，您可以修改这些数值来调整动画效果。

对于opacity属性，值的范围是0(完全透明)到1(完全不透明)。对于translateX和translateY属性，值表示位移距离，可以使用px、em或百分比单位。对于scale属性，值表示缩放比例，1表示原始大小，大于1表示放大，小于1表示缩小。对于rotate属性，值表示旋转角度，正值表示顺时针旋转，负值表示逆时针旋转。

编辑完成后按回车键确认修改。您可以使用滑块进行粗略调整，也可以在数值输入框中输入精确值。建议先用滑块快速调整到大致效果，再用数值输入框进行精细微调。编辑过程中可以随时播放预览来检查动画效果。

完成关键帧设置后，点击播放按钮或按空格键预览动画效果。播放过程中播放头会沿时间轴移动，预览区域中的元素会实时显示动画效果。您可以拖拽播放头到任意位置，查看动画在该时刻的状态。

如果对动画效果满意，点击"复制CSS"按钮将生成的@keyframes代码复制到剪贴板。生成的代码包含完整的动画名称、关键帧百分比和属性值。将代码粘贴到CSS文件中，然后通过animation属性将动画应用到目标元素即可。

如果需要进一步调整，可以修改关键帧的位置或值，然后重新预览和导出。建议在导出前多次测试动画效果，确保在不同场景下的表现都符合预期。导出的代码可以直接用于生产环境，无需额外的格式调整或代码压缩。

拖拽操作：在时间轴上拖拽关键帧节点可以改变其时间位置。播放头也可以拖拽到任意位置查看特定时刻的动画状态。拖拽过程中按住Shift键可以锁定时间轴方向，避免误操作。

点击添加：在属性轨道的空白位置点击即可添加新的关键帧节点。节点会自动放置在点击位置的对应时间点。

双击编辑：双击关键帧节点可以打开编辑对话框，精确设置节点的时间位置和属性值。

右键删除：在关键帧节点上右键点击会弹出上下文菜单，选择"删除"选项可以移除该节点。

空格键播放：按空格键可以开始或暂停动画播放，是最常用的快捷操作。