CSS关键帧动画：实现图像分阶段路径移动——水平滑动后对角线移动教程-html教程-PHP中文网

CSS关键帧动画：实现图像分阶段路径移动——水平滑动后对角线移动教程

碧海醫心

发布： 2025-10-18 09:18:35

原创

485人浏览过

CSS关键帧动画：实现图像分阶段路径移动——水平滑动后对角线移动教程

本教程详细讲解如何利用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 元素定义基础样式和动画关键帧。

啵啵动漫

一键生成动漫视频，小白也能轻松做动漫。

298

查看详情

基础样式：
- 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动画的无限可能性。

以上就是CSS关键帧动画：实现图像分阶段路径移动——水平滑动后对角线移动教程的详细内容，更多请关注php中文网其它相关文章！