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

在时间轴上添加关键帧节点非常简单。首先确保您已经添加了至少一个动画属性轨道(如opacity、translateX等)，然后在该轨道的空白位置点击鼠标左键即可在该时间点添加一个新的关键帧节点。新节点会以圆点形式显示在时间轴上。

建议在动画的起始位置(0%)和结束位置(100%)各添加一个关键帧节点，这是最基础的动画设置。如果需要创建更复杂的动画效果，可以在中间位置添加额外的节点。例如，要制作一个弹跳效果，您可以在0%、50%和100%位置分别设置不同的translateY值。添加节点后，可以通过双击来编辑该节点的具体属性值。

调整动画总时长的方法很简单。在工具界面的顶部设置区域，找到"动画时长"输入框，修改其中的数值即可。支持从0.1秒到10秒的范围。修改时长后，时间轴上的所有关键帧节点会自动按比例调整位置，保持动画的相对节奏不变。

例如，如果原来动画时长是2秒，关键帧分别在0%、50%和100%位置，那么修改为4秒后，关键帧仍然在0%、50%和100%位置，但对应的实际时间从0秒、1秒、2秒变成了0秒、2秒、4秒。这种自动调整确保了动画节奏的一致性，您不需要手动重新排列每个关键帧的位置。

应用预设动画效果只需要点击工具界面上的预设按钮即可。工具提供了四种预设效果：淡入淡出、弹跳、左右滑动和脉冲缩放。点击任意预设按钮后，工具会自动添加相应的属性轨道和关键帧节点，并配置好所有参数。

预设效果是学习和快速原型化的利器。您可以先应用预设效果，然后通过播放预览来观察动画表现，再根据需要调整关键帧的位置和值。预设效果的所有参数都是可以修改的，您可以将其作为起点，创作出完全个性化的动画效果。例如，应用"弹跳"预设后，您可以调整translateY的位移值来改变弹跳的高度，或者调整关键帧的时序来改变弹跳的节奏。

导出CSS代码非常简单。完成动画编辑后，点击工具界面上的"复制CSS"按钮，生成的@keyframes代码会自动复制到系统剪贴板。您可以直接将代码粘贴到CSS或SCSS文件中使用。

生成的代码包含完整的@keyframes规则，包括动画名称、所有关键帧百分比和对应的属性值。代码格式规范、注释清晰，可以直接用于生产环境。在将动画应用到HTML元素时，需要在元素的CSS样式中使用animation属性，指定动画名称和时长等参数。例如可以使用 .element 加上 animation 属性来应用动画。

工具提供了多种直观的交互操作。拖拽关键帧节点可以改变其时间位置，拖拽过程中会显示当前时间百分比。播放头也可以拖拽到任意位置，实时预览该时刻的动画状态。在属性轨道空白位置点击可以添加新的关键帧节点。

双击关键帧节点可以打开编辑对话框，精确设置节点的时间位置和属性值。在节点上右键点击会弹出上下文菜单，可以选择删除该节点。按空格键可以开始或暂停动画播放。这些操作组合使用可以高效地完成动画编辑工作。建议多尝试不同的操作方式，熟悉工具的交互逻辑后编辑效率会大幅提升。

当然可以。工具支持同时添加和编辑多个动画属性。通过"添加属性"按钮可以添加多个属性轨道，每个轨道独立控制一个CSS属性的动画变化。多个属性轨道可以同时存在于时间轴上，每个轨道上的关键帧节点独立编辑。

多属性组合可以创建复杂的复合动画效果。例如，同时添加opacity和translateY属性，可以创建一个同时淡入和上移的效果。同时添加scale和rotate属性，可以创建一个缩放旋转的组合效果。不同属性轨道上的关键帧可以设置在不同的时间位置，创造出丰富的动画节奏变化。播放预览会同时显示所有属性轨道的动画效果，让您直观地看到复合动画的最终表现。

生成的@keyframes CSS代码使用标准的CSS语法，在所有现代浏览器中都有良好的兼容性。opacity、transform(包括translateX、translateY、scale和rotate)等属性在Chrome、Firefox、Safari、Edge等主流浏览器中都得到完整支持。

需要注意的是，如果需要支持较旧的浏览器(如IE10及以下版本)，可能需要添加浏览器前缀(-webkit-、-moz-等)。生成的代码默认不包含浏览器前缀，因为现代浏览器已经不再需要前缀支持。如果您需要兼容旧版浏览器，可以在导出代码后手动添加相应的前缀，或者使用Autoprefixer等工具自动添加。