本教程详细阐述如何利用css `keyframes` 实现一个两阶段的图形动画：首先从页面左侧中点水平滑动至屏幕中心，随后从屏幕中心对角线滑动至左上角。通过精确设置关键帧的百分比和对应的`top`、`left`属性，结合`animation-fill-mode: forwards`，可创建流畅且停留在最终状态的复杂动画效果。
在现代网页设计中，动画是提升用户体验和页面活力的重要手段。CSS动画提供了一种声明式的方式来创建各种动态效果，而@keyframes规则则是实现复杂、多阶段动画的核心。本文将深入探讨如何利用@keyframes实现一个图形元素先水平移动再对角线移动的复合动画效果。
理解多阶段动画的原理
CSS动画通过定义一系列关键帧（keyframes）来描述元素在不同时间点的样式。每个关键帧都由一个百分比值（0%到100%）表示动画进程中的特定时刻，并定义了该时刻元素应具有的CSS属性。浏览器会在这些关键帧之间平滑地过渡元素的样式。
对于需要按顺序执行多个不同方向或类型的动画，我们只需在同一个@keyframes规则中定义多个中间关键帧。例如，要实现“先水平后对角线”的动画，我们可以将动画总时长划分为几个阶段，并在每个阶段的结束点设置一个关键帧。
动画实现步骤
我们将通过一个具体的例子来演示如何实现上述动画：一个图形（例如一个div元素）首先从页面左侧中点水平滑动到屏幕中心，然后从屏幕中心对角线滑动到屏幕左上角。
立即学习“前端免费学习笔记（深入）”；
1. HTML结构准备
首先，我们需要一个承载动画的HTML元素。这里我们使用一个简单的div：
<div id="img1">IMAGE</div>
2. CSS基础样式与动画属性
为了让div元素能够精确地定位和动画，我们需要为其设置position: absolute，并定义动画的基本属性，如动画名称、持续时间、缓动函数以及动画填充模式。
#img1 {
/* 初始定位：垂直居中 */
top: 50%;
/* 将元素显示为块级元素 */
display: block;
/* 启用绝对定位，以便使用top和left进行精确移动 */
position: absolute;
/* 定义动画：名称 持续时间 缓动函数 填充模式 */
animation: image1 10s linear forwards;
/* 可选：设置元素尺寸和背景色以便观察 */
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
color: white;
font-weight: bold;
}关键属性解释：
- top: 50%;: 将元素的顶部边缘定位在父容器的垂直中点。
- position: absolute;: 允许我们使用top和left属性相对于其最近的已定位祖先元素进行定位。
- animation: image1 10s linear forwards;:
- image1: 动画的名称，对应@keyframes image1。
- 10s: 动画的总持续时间为10秒。
- linear: 动画的缓动函数，表示动画以恒定速度进行。
- forwards: animation-fill-mode属性，表示动画结束后，元素将保持其最终关键帧（100%）定义的样式，而不是返回到初始状态。
3. 定义关键帧 (@keyframes)
这是实现多阶段动画的核心。我们需要定义三个关键帧来描述动画的三个重要状态：
- 0%：动画开始时的状态（左侧中点）。
- 50%：动画进行到一半时的状态（屏幕中心），这是水平移动的终点和对角线移动的起点。
- 100%：动画结束时的状态（左上角）。
@-webkit-keyframes image1 { /* 考虑兼容性，添加 -webkit- 前缀 */
0% {
left: 0; /* 从左边缘开始 */
top: 50%; /* 垂直居中 */
/* transform: translateX(0); 如果需要更精细的控制，可以配合transform */
}
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%;: 元素保持垂直居中。
- 这定义了动画的第一阶段（水平滑动）的终点，同时也是第二阶段（对角线滑动）的起点。动画的前50%时间（即5秒）将用于从0%状态过渡到50%状态。
-
100%:
- left: 0;: 元素水平移动到父容器的最左侧。
- top: 0;: 元素垂直移动到父容器的最顶部。
- 这定义了动画的最终状态：页面的左上角。动画的后50%时间（即5秒）将用于从50%状态过渡到100%状态，从而实现对角线滑动。
完整示例代码
将上述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占满整个视口高度 */
position: relative; /* 为#img1提供定位上下文 */
}
#img1 {
top: 50%;
display: block;
position: absolute;
animation: image1 10s linear forwards;
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
color: white;
font-weight: bold;
transform: translateY(-50%); /* 修正top:50%导致元素中心不在中线的问题 */
}
/* 兼容性前缀 */
@-webkit-keyframes image1 {
0% {
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
}
50% {
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%); /* 确保元素中心在屏幕中心 */
}
100% {
left: 0;
top: 0;
-webkit-transform: translateY(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: translateY(0);
}
}
</style>
</head>
<body>
<div id="img1">IMAGE</div>
</body>
</html>注意： 在上述示例中，为了更精确地控制元素的中心点，我引入了transform: translateY(-50%)和transform: translate(-50%, -50%)。
- top: 50%; transform: translateY(-50%);：将元素的垂直中线对齐到父容器的垂直中线。
- left: 50%; top: 50%; transform: translate(-50%, -50%);：将元素的中心对齐到父容器的中心。
- left: 0; top: 0; transform: translateY(0);：将元素的左上角对齐到父容器的左上角。 这样可以确保动画路径是基于元素中心或左上角的精确移动。
注意事项与优化
- 动画持续时间 (animation-duration): 根据需求调整动画的总时长。如果动画阶段较多或需要更长的停留时间，可以增加总时长。
- 缓动函数 (animation-timing-function): linear提供恒定速度，但你可以尝试其他值如ease-in、ease-out、ease-in-out或自定义cubic-bezier函数，以获得更自然的动画效果。
- 更多关键帧: 如果需要更复杂的路径或在某个点暂停，可以添加更多的关键帧（例如25%、75%等），并在这些关键帧中定义元素的样式。
- 浏览器兼容性: 始终考虑添加浏览器前缀（如-webkit-、-moz-等）以确保动画在不同浏览器中的兼容性。尽管现代浏览器对标准语法支持良好，但旧版本可能仍需要前缀。
- 性能优化: 尽量使用transform属性进行动画（如translateX, translateY）而不是top和left，因为transform通常由GPU加速，性能更优。在本例中，为了演示top和left的直接控制，我们主要使用了它们，但在实际项目中可以考虑用transform重构。
总结
通过灵活运用CSS的@keyframes规则，我们可以轻松实现各种复杂的多阶段动画。关键在于将动画分解为多个逻辑阶段，并在每个阶段的起始和结束点定义清晰的CSS样式。结合animation属性的各种参数，如持续时间、缓动函数和填充模式，我们可以创建出丰富且富有表现力的网页动态效果。
