本教程详细讲解如何利用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。
立即学习“前端免费学习笔记（深入）”；
<div id="img1">图像内容</div>
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结合，形成一个完整的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS分阶段路径动画</title>
<style>
body {
margin: 0;
overflow: hidden; /* 防止滚动条出现，确保动画在视口内 */
height: 100vh;
width: 100vw;
background-color: #f0f0f0;
}
#img1 {
width: 100px; /* 示例图像宽度 */
height: 100px; /* 示例图像高度 */
background-color: royalblue; /* 示例图像背景色 */
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
position: absolute;
top: 50%; /* 元素垂直居中 */
/* 动画属性 */
animation: image1 10s linear forwards;
/* 兼容性前缀，现代浏览器可能不再需要 */
-webkit-animation: image1 10s linear forwards;
}
/* 定义动画关键帧 */
@keyframes image1 {
0% {
left: 0;
top: 50%; /* 确保动画开始时垂直居中 */
transform: translateX(0);
}
50% {
left: 50%;
top: 50%;
}
100% {
left: 0;
top: 0;
}
}
/* 兼容性前缀 */
@-webkit-keyframes image1 {
0% {
left: 0;
top: 50%;
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
left: 50%;
top: 50%;
}
100% {
left: 0;
top: 0;
}
}
</style>
</head>
<body>
<div id="img1">IMAGE</div>
</body>
</html>注意事项与优化
-
动画时长与缓动函数：
- 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动画的无限可能性。
