本教程详细讲解如何利用css的`@keyframes`规则创建分阶段的复杂路径动画。我们将以一个具体的案例为例，演示如何让图像先从页面左侧中间位置水平滑动到屏幕中心，再从屏幕中心对角线滑动到屏幕左上角，并通过代码示例和注意事项，帮助读者掌握多阶段css动画的实现技巧。
理解CSS animation 与 @keyframes
CSS动画是网页交互设计中不可或缺的一部分。animation 属性是CSS3引入的一组用于创建动画的简写属性，它允许开发者为元素定义动画名称、持续时间、缓动函数、延迟、迭代次数和填充模式等。而 @keyframes 规则则是动画的核心，它定义了动画在不同时间点（或百分比）的样式状态。通过在 @keyframes 中设置 0% (动画开始)、100% (动画结束) 以及中间的任意百分比，我们可以精确控制元素在动画过程中的外观和位置变化。
实现分阶段动画的原理
要实现图像先水平滑动后对角线滑动的分阶段动画，我们需要在 @keyframes 中定义至少三个关键帧：
- 0% 关键帧： 定义动画的起始状态。在这个案例中，图像将位于页面左边缘的垂直中间位置。
- 50% 关键帧： 定义动画的中间状态。这个点既是第一阶段（水平滑动）的终点，也是第二阶段（对角线滑动）的起点。图像将位于屏幕的中心位置（其左上角）。
- 100% 关键帧： 定义动画的最终状态。图像将位于屏幕的左上角。
通过在这些关键帧中设置不同的 left 和 top 属性值，CSS动画引擎将自动计算并平滑过渡元素在这些状态之间的变化，从而创建出连续且分阶段的移动效果。
动画实现步骤与代码示例
1. HTML 结构
首先，我们需要一个用于动画的HTML元素。这里我们使用一个简单的 div 元素，并赋予它一个ID。
立即学习“前端免费学习笔记（深入）”；
图像内容
2. CSS 样式定义
接下来，我们将为这个 div 元素定义基础样式和动画关键帧。
-
基础样式：
- position: absolute;：使元素可以自由定位。
- display: block;：确保元素以块级形式显示。
- top: 50%;：将元素的垂直起始位置设置为页面高度的50%，使其垂直居中。
- animation: image1 10s linear forwards;：应用名为 image1 的动画。
- image1: 动画名称。
- 10s: 动画持续时间为10秒。
- linear: 动画速度曲线为线性，即匀速。
- forwards: 动画结束后，元素将保持在动画的最终状态。这是实现分阶段动画并使其停留在最终位置的关键。
-
@keyframes 规则：
- 0% { left: 0; top: 50%; transform: translateX(0); }：动画开始时，元素位于页面的最左侧边缘，垂直居中。transform: translateX(0) 在此是可选的，但可以明确声明 transform 属性的初始状态。
- 50% { left: 50%; top: 50%; }：动画进行到50%时，元素移动到屏幕的中心点。请注意，这里的 left: 50%; top: 50%; 是指元素的左上角位于屏幕的中心。
- 100% { left: 0; top: 0; }：动画结束时，元素移动到屏幕的左上角。
完整代码示例
将HTML和CSS结合，形成一个完整的示例：
CSS分阶段路径动画
IMAGE
注意事项与优化
-
动画时长与缓动函数：
- animation-duration (例如 10s) 可以调整动画的整体播放速度。
- animation-timing-function (例如 linear) 定义动画的速度曲线。除了 linear，还有 ease (慢速开始，加速，慢速结束)、ease-in (慢速开始)、ease-out (慢速结束) 等，甚至可以使用 cubic-bezier() 自定义缓动曲线，以实现更自然的运动效果。
-
animation-fill-mode: forwards 的重要性：
- 这个属性确保动画结束后，元素会停留在 100% 关键帧定义的最终状态。如果没有 forwards，动画结束后元素会立即跳回其初始状态。
-
浏览器兼容性：
- 在旧版浏览器中，可能需要为 animation 属性和 @keyframes 规则添加浏览器前缀，例如 -webkit- (Chrome, Safari)、-moz- (Firefox)、-o- (Opera) 等。在现代浏览器中，通常可以直接使用标准语法。
-
元素定位与居中：
- 本教程中 top: 50%; left: 50%; 定位的是元素的左上角。如果需要元素自身的中心点位于屏幕中心，则需要结合 transform: translate(-50%, -50%);。例如，在 50% 关键帧中可以设置为 left: 50%; top: 50%; transform: translate(-50%, -50%);。在本案例中，当前实现方式符合题目要求，即元素的左上角到达指定位置。
-
多阶段动画的灵活性：
- 你可以根据需要添加更多的关键帧（例如 25%, 75% 等）来创建更复杂的路径、增加动画的暂停效果或改变动画的速度。每个关键帧都可以定义不同的CSS属性。
总结
通过本教程，我们学习了如何利用CSS的 @keyframes 规则创建分阶段的复杂路径动画。通过精确定义动画在不同百分比时间点的样式状态，并结合 animation 属性的 forwards 模式，我们可以实现图像从一个位置平滑地移动到另一个位置，再按不同路径移动到最终位置的效果。掌握这一技术，将极大地增强你网页的动态表现力和用户体验。鼓励读者尝试不同的关键帧、属性组合和缓动函数，以探索CSS动画的无限可能性。
