17370845950

本教程详细阐述如何利用css `keyframes` 实现一个两阶段的图形动画：首先从页面左侧中点水平滑动至屏幕中心，随后从屏幕中心对角线滑动至左上角。通过精确设置关键帧的百分比和对应的`top`、`left`属性，结合`animation-fill-mode: forwards`，可创建流畅且停留在最终状态的复杂动画效果。

在现代网页设计中，动画是提升用户体验和页面活力的重要手段。CSS动画提供了一种声明式的方式来创建各种动态效果，而@keyframes规则则是实现复杂、多阶段动画的核心。本文将深入探讨如何利用@keyframes实现一个图形元素先水平移动再对角线移动的复合动画效果。

理解多阶段动画的原理

CSS动画通过定义一系列关键帧（keyframes）来描述元素在不同时间点的样式。每个关键帧都由一个百分比值（0%到100%）表示动画进程中的特定时刻，并定义了该时刻元素应具有的CSS属性。浏览器会在这些关键帧之间平滑地过渡元素的样式。

对于需要按顺序执行多个不同方向或类型的动画，我们只需在同一个@keyframes规则中定义多个中间关键帧。例如，要实现“先水平后对角线”的动画，我们可以将动画总时长划分为几个阶段，并在每个阶段的结束点设置一个关键帧。

动画实现步骤

我们将通过一个具体的例子来演示如何实现上述动画：一个图形（例如一个div元素）首先从页面左侧中点水平滑动到屏幕中心，然后从屏幕中心对角线滑动到屏幕左上角。

1. HTML结构准备

首先，我们需要一个承载动画的HTML元素。这里我们使用一个简单的div：

IMAGE

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代码整合，即可实现所需的多阶段动画效果。

    
    
    
    


    IMAGE

注意： 在上述示例中，为了更精确地控制元素的中心点，我引入了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);：将元素的左上角对齐到父容器的左上角。 这样可以确保动画路径是基于元素中心或左上角的精确移动。

注意事项与优化

1. 动画持续时间 (animation-duration): 根据需求调整动画的总时长。如果动画阶段较多或需要更长的停留时间，可以增加总时长。
2. 缓动函数 (animation-timing-function): linear提供恒定速度，但你可以尝试其他值如ease-in、ease-out、ease-in-out或自定义cubic-bezier函数，以获得更自然的动画效果。
3. 更多关键帧: 如果需要更复杂的路径或在某个点暂停，可以添加更多的关键帧（例如25%、75%等），并在这些关键帧中定义元素的样式。
4. 浏览器兼容性: 始终考虑添加浏览器前缀（如-webkit-、-moz-等）以确保动画在不同浏览器中的兼容性。尽管现代浏览器对标准语法支持良好，但旧版本可能仍需要前缀。
5. 性能优化: 尽量使用transform属性进行动画（如translateX, translateY）而不是top和left，因为transform通常由GPU加速，性能更优。在本例中，为了演示top和left的直接控制，我们主要使用了它们，但在实际项目中可以考虑用transform重构。

总结

通过灵活运用CSS的@keyframes规则，我们可以轻松实现各种复杂的多阶段动画。关键在于将动画分解为多个逻辑阶段，并在每个阶段的起始和结束点定义清晰的CSS样式。结合animation属性的各种参数，如持续时间、缓动函数和填充模式，我们可以创建出丰富且富有表现力的网页动态效果。