使用 CSS Keyframes 实现多阶段复杂路径动画：以水平后对角线移动为例
本文详细介绍了如何利用 CSS `keyframes` 实现元素的多阶段复杂路径动画，特别是从页面左侧中点水平滑动至屏幕中心，再对角线移动至屏幕左上角的动画效果。通过精确定义不同时间点的元素位置，结合 `position: absolute` 和 `animation` 属性，读者将学会创建流畅且富有表现力的网页动态效果。
CSS 动画是前端开发中实现动态效果的强大工具，它允许开发者通过定义关键帧（keyframes）来控制元素在一段时间内的样式变化，从而创建出平滑的过渡和复杂的运动轨迹。对于需要多阶段运动的场景，例如先水平移动再对角线移动，@keyframes 规则提供了灵活且高效的解决方案。
CSS Keyframes 基础：多阶段动画原理
@keyframes 规则是 CSS 动画的核心。它通过百分比来定义动画在不同时间点的状态。0% 表示动画的起始状态，100% 表示动画的结束状态。在这两者之间，我们可以定义任意数量的中间状态（例如 25%、50%、75%），从而创建出复杂的运动路径或样式变化。
对于一个需要先水平移动再对角线移动的元素，我们可以将整个动画过程划分为几个关键阶段：
立即学习“前端免费学习笔记（深入）”；
- 起始点 (0%): 元素位于页面左侧中点。
- 中间点 (50%): 元素水平移动到屏幕中心。
- 结束点 (100%): 元素从屏幕中心对角线移动到屏幕左上角。
通过在 0%、50% 和 100% 处分别定义元素的位置，CSS 动画引擎会自动计算这些关键帧之间的平滑过渡。
实现步骤与代码示例
我们将通过一个具体的例子来演示如何实现上述多阶段动画。
HTML 结构准备
首先，我们需要一个简单的 HTML 元素作为动画对象。这里我们使用一个 div 元素，并赋予其 ID img1。
<div id="img1">IMAGE</div>
CSS 样式定义
接下来，我们为 #img1 元素定义基础样式和动画属性。
#img1 {
/* 定位上下文，允许使用 top 和 left 进行绝对定位 */
position: absolute;
/* 初始垂直居中 */
top: 50%;
/* 确保元素显示 */
display: block;
/* 动画属性简写：动画名称 持续时间 缓动函数 动画结束时的状态 */
animation: image1 10s linear forwards;
}- position: absolute;: 这是实现精确位置控制的关键，它使元素脱离文档流，并允许我们使用 top 和 left 属性进行定位。
- top: 50%;: 将元素的垂直位置初始设置为父容器的 50%，实现垂直居中。
- animation: image1 10s linear forwards;: 这是动画的简写属性。
- image1: 动画的名称，与 @keyframes 规则中定义的名称一致。
- 10s: 动画的总持续时间为 10 秒。
- linear: 动画的缓动函数，表示动画以恒定的速度进行。
- forwards: 动画结束后，元素将保持其最终状态（即 100% 关键帧定义的状态），而不是返回到起始状态。这对于我们的场景至关重要。
Keyframes 动画路径定义
现在，我们定义 image1 动画的关键帧，以实现水平后对角线移动的效果。
@-webkit-keyframes image1 { /* 兼容旧版 WebKit 浏览器 */
0% {
left: 0;
top: 50%; /* 确保起始点垂直居中 */
}
50% {
left: 50%;
top: 50%; /* 移动到屏幕中心，保持垂直居中 */
}
100% {
left: 0;
top: 0; /* 移动到屏幕左上角 */
}
}
@keyframes image1 { /* 标准语法 */
0% {
left: 0;
top: 50%;
}
50% {
left: 50%;
top: 50%;
}
100% {
left: 0;
top: 0;
}
}- 0%: 元素从页面左边缘 (left: 0;)，垂直居中 (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; /* 确保 body 占据整个视口高度 */
width: 100vw; /* 确保 body 占据整个视口宽度 */
position: relative; /* 为绝对定位的子元素提供定位上下文 */
background-color: #f0f0f0;
}
#img1 {
position: absolute;
top: 50%; /* 初始垂直居中 */
display: block;
width: 100px; /* 示例图像宽度 */
height: 100px; /* 示例图像高度 */
background-color: #3498db; /* 示例图像背景色 */
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
border-radius: 5px;
animation: image1 10s linear forwards;
/* 兼容旧版 WebKit 浏览器 */
-webkit-animation: image1 10s linear forwards;
}
@-webkit-keyframes image1 {
0% {
left: 0;
top: 50%;
transform: translateY(-50%); /* 修正 top:50% 使元素中心对齐 */
}
50% {
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* 修正 left:50%, top:50% 使元素中心对齐 */
}
100% {
left: 0;
top: 0;
transform: translate(0, 0); /* 移动到左上角，不再需要修正 */
}
}
@keyframes image1 {
0% {
left: 0;
top: 50%;
transform: translateY(-50%);
}
50% {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
100% {
left: 0;
top: 0;
transform: translate(0, 0);
}
}
</style>
</head>
<body>
<div id="img1">IMAGE</div>
</body>
</html>注意：为了使 top: 50%; 和 left: 50%; 真正将元素的中心对齐到父容器的中心，我们需要结合 transform: translate(-50%, -50%);。这是因为 top 和 left 属性默认是相对于元素的左上角进行定位的。在上面的完整示例中，我添加了 transform 来实现更精确的居中效果。如果不需要精确居中，仅使用 top 和 left 也是可以的，但元素左上角会位于指定坐标。
关键点与注意事项
- animation-fill-mode: forwards 的重要性: 如果不设置 forwards，动画结束后元素会立即返回到其初始状态。对于需要元素停留在动画结束位置的场景，forwards 是必不可少的。
-
调整动画时长与缓动函数:
- animation-duration: 可以根据需要调整动画的总时长。例如，animation: image1 5s linear forwards; 会使动画在 5 秒内完成。
- animation-timing-function: 除了 linear，还可以使用 ease (默认，慢-快-慢), ease-in (慢速开始), ease-out (慢速结束), ease-in-out (慢速开始和结束) 或 cubic-bezier() 来自定义更复杂的缓动曲线。
- 扩展复杂路径：增加关键帧: 如果动画路径需要更多的转折点或暂停，可以在 0% 到 100% 之间添加更多的关键帧（例如 20%, 40%, 60%, 80%），并在这些关键帧中定义元素的位置和样式。这使得创建极其复杂的动画成为可能。
-
性能考量：transform 与 left/top:
- 在实现简单的平移、旋转、缩放等动画时，优先使用 transform 属性（如 translateX, translateY）。因为 transform 属性通常由 GPU 加速，性能优于直接改变 left 或 top 等布局属性。
- 然而，对于需要精确控制元素在页面绝对位置的场景（如本教程），left 和 top 仍然是定义关键帧位置的有效且直观的方式。当 left/top 配合 position: absolute 使用时，浏览器通常也能较好地优化其动画性能。在现代浏览器中，两者的性能差异在多数情况下并不明显，但了解其原理有助于在特定场景下做出更优选择。
总结
通过 CSS Keyframes，我们可以轻松实现元素的多阶段复杂路径动画。关键在于理解 0% 到 100% 关键帧的作用，并精确定义每个关键帧的样式状态。结合 position: absolute 进行定位，以及 animation 属性的灵活配置（特别是 forwards 模式），开发者可以创建出丰富多彩、引人注目的网页动态效果。掌握这些技术，将极大地提升网页的用户体验和视觉吸引力。
以上就是使用 CSS Keyframes 实现多阶段复杂路径动画：以水平后对角线移动为例的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
974
广告
收藏
