offset-path
CSS offset-path 属性用于定义元素在动画中跟随的移动路径，源自早期的 motion-path 属性，现已在规范中统一重命名为 offset-* 系列。文章详细介绍了使用 SVG path 语法指定路径，例如 path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0")，并通过 CSS 动画使元素沿路径移动，结合 @keyframes 和 offset-distance 控制动画进度。offset-rotate 属性提供方向调整，支持自动对齐、反向或固定角度旋转，增强动画表现力。文章还探讨了 Web Animations API 的集成，允许通过 JavaScript 控制动画，提升灵活性。多个 CodePen 示例直观演示了效果，包括从 SVG 编辑器导出路径的直接应用，以及浏览器支持情况。此外，提及了 SMIL 和 GreenSock 作为替代方案，帮助开发者根据需求选择工具。整体内容覆盖了 offset-path 的语法、动画控制、相关属性如 offset-anchor 和 offset-distance，以及实战示例，为前端开发者提供了全面且实用的指南。