CSS实现图形先水平后对角线滑动的多阶段动画教程-html教程-PHP中文网

CSS实现图形先水平后对角线滑动的多阶段动画教程

花韻仙語

发布： 2025-10-18 09:14:12

原创

485人浏览过

CSS实现图形先水平后对角线滑动的多阶段动画教程

本教程详细阐述如何利用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，并定义动画的基本属性，如动画名称、持续时间、缓动函数以及动画填充模式。

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

#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重构。