本教程详细讲解如何利用CSS `@keyframes` 实现一个两阶段动画：首先将图形元素从页面左侧中点水平滑动至屏幕中心，随后从屏幕中心对角线滑动至屏幕左上角。通过定义关键帧的时间点和样式属性，实现流畅的复合路径动画，并确保动画结束后元素停留在最终位置。
在网页设计中，为元素添加动态效果能够显著提升用户体验和视觉吸引力。CSS动画提供了一种强大且灵活的方式来实现各种复杂的运动轨迹。本教程将深入探讨如何利用@keyframes规则，结合不同的CSS属性，创建一个包含水平滑动和对角线滑动的复合动画效果。
动画核心：理解@keyframes
@keyframes是CSS动画的核心，它允许我们定义动画在不同时间点的样式状态。通过指定百分比（例如0%、50%、100%），我们可以精确控制元素在动画过程中如何变化。对于需要多阶段运动的动画，定义多个中间关键帧是实现复杂路径的关键。
HTML结构
首先，我们需要一个用于动画的HTML元素。这里我们使用一个简单的div元素，并赋予其一个ID，以便通过CSS进行样式和动画控制。
立即学习“前端免费学习笔记（深入）”；
IMAGE
在这个例子中，IMAGE文本可以替换为任何图形图像或其他内容。
定义元素的初始样式
在应用动画之前，我们需要为元素设置其初始位置和基本样式。为了实现精确的定位和动画，我们将使用position: absolute。
#img1 {
/* 将元素定位到视口中 */
position: absolute;
/* 初始垂直位置：元素的顶部边缘位于视口高度的50%处 */
top: 50%;
/* 默认显示为块级元素 */
display: block;
/* 定义动画：名称、时长、缓动函数、填充模式 */
animation: image1 10s linear forwards;
/* 示例尺寸，可根据实际内容调整 */
width: 100px;
height: 100px;
background-color: lightblue; /* 示例背景色 */
text-align: center;
line-height: 100px;
font-weight: bold;
color: white;
}这里，top: 50%将元素的顶部边缘定位在视口垂直方向的中间。animation属性是一个简写形式，它包含了动画的名称（image1）、持续时间（10s）、缓动函数（linear，表示匀速）以及填充模式（forwards）。forwards填充模式至关重要，它确保动画结束后元素会保持其在100%关键帧定义的最终样式，而不是返回到初始状态。
创建复合动画的关键帧
现在，我们来定义动画的实际运动轨迹。我们将使用三个关键帧：0%（起始点）、50%（中间点，水平滑动结束点）和100%（终点，对角线滑动结束点）。
@-webkit-keyframes image1 { /* 兼容旧版WebKit浏览器 */
0% {
/* 动画开始时：元素左边缘位于视口最左侧，顶部边缘位于视口垂直中点 */
left: 0;
/* transform: translateX(0) 在此特定上下文中通常是冗余的，
但可用于确保transform属性被初始化或在更复杂动画中设置基线 */
transform: translateX(0);
}
50% {
/* 动画进行到一半时：元素左边缘位于视口水平中点，顶部边缘保持在垂直中点 */
left: 50%;
top: 50%;
}
100% {
/* 动画结束时：元素左边缘和顶部边缘都位于视口左上角 */
left: 0;
top: 0;
}
}
@keyframes image1 { /* 标准语法 */
0% {
left: 0;
transform: translateX(0);
}
50% {
left: 50%;
top: 50%;
}
100% {
left: 0;
top: 0;
}
}关键帧解析：
- 0%： 动画的起始状态。left: 0将元素定位在页面的最左侧，结合#img1上的top: 50%，元素的左上角将位于(0, 50%)。
- 50%： 动画进行到一半时，元素完成水平滑动。left: 50%和top: 50%将元素的左上角定位到屏幕的中心点(50%, 50%)。这个阶段实现了从左侧中点到屏幕中心的水平移动。
- 100%： 动画的最终状态。left: 0和top: 0将元素的左上角定位到屏幕的左上角(0, 0)。这个阶段实现了从屏幕中心到左上角的对角线移动。
注意事项与优化
- 浏览器兼容性： 为了确保动画在不同浏览器中的兼容性，特别是旧版浏览器，建议使用带有供应商前缀的@keyframes规则（如-webkit-keyframes）。在现代浏览器中，标准语法@keyframes已足够。
- 动画时长与缓动函数： 示例中使用了10s的动画时长和linear的缓动函数。你可以根据需求调整animation-duration来改变动画速度，或选择其他缓动函数（如ease-in, ease-out, ease-in-out, cubic-bezier(...)）来创建更自然的运动曲线。
- 精确居中： 如果你希望元素的中心点位于特定位置（例如屏幕中心），而不是其左上角，你需要结合transform: translate(-50%, -50%)。例如，在#img1上设置top: 50%; left: 50%; transform: translate(-50%, -50%);可以使元素初始时水平垂直居中。在关键帧中也需要相应调整transform属性。本教程的示例是基于元素左上角定位的。
- 动画暂停与延迟： 你可以通过在关键帧之间插入额外的关键帧来创建动画的暂停效果，或者使用animation-delay属性来延迟动画的开始时间。
- animation-fill-mode: forwards的重要性： 如果没有forwards，动画结束后元素会立即跳回其初始样式。forwards确保元素停留在100%关键帧定义的最终状态。
完整代码示例
将上述HTML和CSS代码整合，即可实现所需的复合滑动动画效果。
CSS 复合滑动动画
IMAGE
总结
通过本教程，我们学习了如何利用CSS的@keyframes规则，结合position、top、left等属性，实现一个包含水平滑动和对角线滑动的复合动画效果。理解关键帧的工作原理以及animation-fill-mode: forwards的重要性，是创建流畅且可控的CSS动画的关键。你可以根据这些基础知识，进一步探索更复杂的动画路径和交互效果。
