UD5工具箱
术语表
以下收录了与 CSS 动画和网页动效相关的核心术语和概念。掌握这些术语将帮助您更好地理解动画制作的技术细节。
关键帧（Keyframe）
关键帧是 CSS 动画中的核心概念，定义了动画在特定时间点的属性状态。通过在 @keyframes 规则中设置多个关键帧，浏览器会自动计算关键帧之间的属性值过渡，生成流畅的动画效果。例如，一个从左到右移动的动画需要至少两个关键帧：起始位置（0%）和结束位置（100%）。关键帧可以设置任意的百分比位置（如 25%、50%、75%），百分比越精细，动画控制越精确。
CSS @keyframes 规则
@keyframes 是 CSS 中定义动画序列的 at-rule。它通过百分比或关键字（from/to）定义动画在不同阶段的样式状态。基本语法为：@keyframes animation-name { 0% { property: value; } 100% { property: value; } }。@keyframes 定义的动画需要通过 animation 属性应用到具体的元素上才能生效。一个 @keyframes 规则可以包含任意数量的关键帧，定义复杂的动画序列。
缓动函数（Easing Function）
缓动函数定义了动画属性值随时间变化的速率曲线，是控制动画节奏和质感的关键参数。CSS 提供了多种内置缓动函数：linear（匀速）、ease（默认，先快后慢再快）、ease-in（慢启动）、ease-out（慢结束）、ease-in-out（慢启动慢结束）。此外，还可以通过 cubic-bezier() 函数自定义缓动曲线。缓动函数的选择直接影响动画的视觉感受，合适的缓动能让动画看起来更加自然和专业。
动画持续时间（Duration）
动画持续时间是指动画从开始到结束所需的总时间，通过 animation-duration 属性设置，单位为秒（s）或毫秒（ms）。持续时间决定了动画的快慢：时间越短动画越快，时间越长动画越慢。选择合适的持续时间需要考虑动画的用途和用户的感知：界面过渡动画通常在 0.2-0.5 秒之间，加载动画可能需要 1-3 秒，复杂的展示动画可能需要更长时间。
translateX / translateY
translateX 和 translateY 是 CSS transform 属性的平移函数，分别用于在水平方向和垂直方向上移动元素。translateX(100px) 将元素向右移动 100 像素，translateY(-50px) 将元素向上移动 50 像素。使用 transform 进行平移不会影响元素在文档流中的位置，是实现位移动画的首选方式。与改变 left/top 属性相比，使用 transform 平移可以利用 GPU 加速，性能更优。
scale（缩放）
scale 是 CSS transform 属性的缩放函数，用于改变元素的大小。scale(1) 表示原始大小，scale(2) 表示放大到两倍，scale(0.5) 表示缩小到一半。scale 函数接受一个或两个参数：一个参数时同时缩放宽度和高度，两个参数时分别控制水平和垂直缩放。缩放动画常用于元素的弹出效果、点击反馈、以及强调显示等场景。
rotate（旋转）
rotate 是 CSS transform 属性的旋转函数，用于围绕元素的中心点旋转元素。rotate(45deg) 将元素顺时针旋转 45 度，rotate(-90deg) 将元素逆时针旋转 90 度。旋转动画常用于加载指示器、图标交互效果、翻转卡片等场景。需要注意的是，旋转的中心点可以通过 transform-origin 属性自定义，默认为元素的中心点。
opacity（透明度）
opacity 是 CSS 属性，用于控制元素的可见程度。值范围从 0（完全透明，不可见）到 1（完全不透明，可见）。opacity 动画是最常用的动画类型之一，常用于实现淡入淡出效果。与其他 CSS 属性不同，opacity 动画不会触发重排（reflow），只触发重绘（repaint），因此性能开销较小。在实现复杂的动画效果时，通常将 opacity 与其他 transform 属性组合使用。
requestAnimationFrame
requestAnimationFrame 是浏览器提供的 JavaScript API，用于在下一次重绘之前调用指定的回调函数。它是实现流畅动画的核心技术，浏览器会自动以设备刷新率（通常为 60fps）的频率调用回调，确保动画的流畅性和与显示器刷新的同步性。与 setInterval/setTimeout 相比，requestAnimationFrame 具有以下优势：自动对齐浏览器刷新率、页面不可见时自动暂停以节省资源、浏览器可以优化多个动画的执行效率。
CSS 动画 vs CSS 过渡
CSS 动画（Animation）和 CSS 过渡（Transition）是实现网页动画的两种主要方式。CSS 过渡通过 transition 属性定义属性值变化时的过渡效果，需要触发条件（如 hover、class 切换），只能定义起始和结束两个状态。CSS 动画通过 @keyframes 定义，可以包含多个关键帧，可以通过 animation 属性自动播放或通过 JavaScript 控制。过渡适合简单的状态切换动画，动画适合复杂的多阶段动画序列。在性能方面，两者都优先使用 GPU 加速的属性（transform、opacity）以获得最佳性能。