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

@keyframes规则：CSS中用于定义动画序列的规则。@keyframes规则通过百分比关键字定义动画在不同时间点的状态。0%表示动画开始时的状态，100%表示动画结束时的状态，中间的百分比表示动画过程中的中间状态。浏览器会自动在定义的关键帧之间进行插值计算，生成平滑的过渡效果。

animation属性：CSS中用于将@keyframes动画应用到元素上的复合属性。animation属性包含多个子属性：animation-name指定动画名称，animation-duration指定动画时长，animation-timing-function指定时间函数，animation-delay指定延迟时间，animation-iteration-count指定循环次数，animation-direction指定播放方向，animation-fill-mode指定填充模式，animation-play-state指定播放状态。

关键帧(Keyframe)：动画过程中特定时间点的状态定义。每个关键帧包含一个时间百分比和在该时间点的CSS属性值。浏览器根据关键帧之间的属性值进行插值计算，生成动画的中间帧。关键帧的数量和位置决定了动画的节奏和复杂度。

时间百分比：关键帧在动画时间线上的位置表示，范围从0%到100%。0%对应动画开始时刻，100%对应动画结束时刻。通过在不同的百分比位置设置关键帧，可以精确控制动画在各个时间点的状态。

opacity(透明度)：CSS属性，控制元素的透明度。值范围从0(完全透明)到1(完全不透明)。通过在关键帧中设置不同的opacity值，可以实现元素的淡入淡出效果。opacity动画是性能最好的CSS动画之一，因为它不会触发浏览器的重排和重绘操作。

translateX(水平位移)：CSS transform属性的函数之一，控制元素在水平方向上的位移。正值使元素向右移动，负值使元素向左移动。translateX动画常用于实现元素的滑入滑出效果，是构建响应式动画的基础属性。

translateY(垂直位移)：CSS transform属性的函数之一，控制元素在垂直方向上的位移。正值使元素向下移动，负值使元素向上移动。translateY动画常用于实现弹跳、下拉等垂直方向的动画效果。

scale(缩放)：CSS transform属性的函数之一，控制元素的缩放比例。scale(1)表示原始大小，scale(1.5)表示放大到1.5倍，scale(0.5)表示缩小到一半。scale动画常用于实现脉冲、呼吸等缩放效果，也可以与其他transform函数组合使用。

rotate(旋转)：CSS transform属性的函数之一，控制元素的旋转角度。正值表示顺时针旋转，负值表示逆时针旋转。rotate动画常用于实现加载指示器、图标旋转等效果。rotate可以与scale和translate组合使用，创建复杂的复合变换动画。

animation-timing-function(时间函数)：CSS属性，控制动画在关键帧之间的过渡速率。常用的时间函数包括linear(匀速)、ease(默认，先快后慢)、ease-in(先慢后快)、ease-out(先快后慢)和ease-in-out(先慢后快再慢)。还可以使用cubic-bezier()函数自定义贝塞尔曲线，精确控制动画的缓动效果。

贝塞尔曲线(Bezier Curve)：用于定义动画缓动效果的数学曲线。cubic-bezier(x1, y1, x2, y2)函数接受四个参数，定义曲线的两个控制点。通过调整控制点的位置，可以创造出各种自然的缓动效果，如弹跳、回弹、惯性等。贝塞尔曲线是实现专业级动画效果的关键技术。

animation-duration(动画时长)：CSS属性，指定动画完成一次播放所需的总时间。时长可以用秒(s)或毫秒(ms)表示。时长的选择直接影响动画的感知效果：过短的时长会导致动画不明显，过长的时长会使动画显得拖沓。一般建议过渡动画在0.2到0.5秒之间，展示动画在0.5到3秒之间。

animation-delay(动画延迟)：CSS属性，指定动画开始前的等待时间。延迟可以用秒(s)或毫秒(ms)表示，支持负值。负值延迟表示动画从指定时间点开始播放，跳过前面的部分。动画延迟常用于创建交错动画效果，让多个元素按顺序播放动画。

合成层(Compositor Layer)：浏览器将页面分成多个独立的层进行合成渲染。使用transform和opacity属性的动画可以在合成层上执行，不触发主线程的重排和重绘，性能更好。这就是为什么translateX、translateY、scale、rotate和opacity是性能最优的动画属性。

will-change属性：CSS属性，提示浏览器某个元素将要进行某种变化，让浏览器提前进行优化。例如will-change: transform告诉浏览器该元素将进行transform动画，浏览器可以提前创建合成层。但过度使用will-change会消耗更多内存，应仅在确实需要优化的元素上使用。

重排(Reflow)：浏览器重新计算元素的几何属性(位置、大小)的过程。触发重排的操作包括修改元素的宽度、高度、边距、边框、内边距、position、display等属性。重排操作性能开销大，应尽量避免在动画中使用触发重排的属性。

重绘(Repaint)：浏览器重新绘制元素的视觉属性(颜色、背景、阴影等)的过程。重绘的性能开销比重排小，但仍然比合成层动画大。使用transform和opacity动画可以避免重绘，直接在合成层上完成动画计算。