CSS3 @keyframes 规则详解

核心知识点

什么是 @keyframes 规则？

@keyframes 是 CSS3 中用于定义动画关键帧的规则。它允许开发者指定动画序列中的关键状态，浏览器会自动计算并插入这些关键帧之间的过渡效果，从而创建平滑的动画。

语法

/* 基本语法 */
@keyframes <animation-name> {
    <keyframe-selector> { <css-properties>; }
    /* 更多关键帧... */
}
  • &lt;animation-name&gt;: 动画的名称，用于在 animation-name 属性中引用
  • &lt;keyframe-selector&gt;: 关键帧的选择器，可以是百分比值（如 0%、50%、100%）或关键字（from 等同于 0%，to 等同于 100%）
  • &lt;css-properties&gt;: 在该关键帧处的 CSS 属性值

关键帧选择器

  • from 或 0%: 动画的开始状态
  • to 或 100%: 动画的结束状态
  • 百分比值（如 25%、50%、75%）: 动画过程中的中间状态

浏览器兼容性

  • Chrome: 43+
  • Firefox: 16+
  • Safari: 9+
  • Edge: 12+

实用案例分析

案例 1: 基本动画定义

代码示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本动画定义</title>
    <style>
        /* 定义动画 */
        @keyframes move {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(200px);
            }
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: #4CAF50;
            /* 应用动画 */
            animation-name: move;
            animation-duration: 2s;
            animation-timing-function: ease;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <p>观察方块的左右移动动画</p>
</body>
</html>

效果分析:

  • 定义了一个名为 move 的动画，从 transform: translateX(0) 过渡到 transform: translateX(200px)
  • 应用了该动画到方块元素，设置了 2 秒的持续时间，无限循环，且交替方向
  • 实现了方块从左到右再从右到左的平滑移动效果

案例 2: 多关键帧动画

代码示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多关键帧动画</title>
    <style>
        /* 定义多关键帧动画 */
        @keyframes bounce {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-100px);
            }
            100% {
                transform: translateY(0);
            }
        }
        
        .ball {
            width: 100px;
            height: 100px;
            background-color: #2196F3;
            border-radius: 50%;
            /* 应用动画 */
            animation-name: bounce;
            animation-duration: 1s;
            animation-timing-function: ease;
            animation-iteration-count: infinite;
        }
    </style>
</head>
<body>
    <div class="ball"></div>
    <p>观察球体的弹跳动画</p>
</body>
</html>

效果分析:

  • 定义了一个名为 bounce 的动画，包含三个关键帧：
    • 0%: 初始位置（ translateY(0) ）
    • 50%: 弹跳至最高点（ translateY(-100px) ）
    • 100%: 回到初始位置（ translateY(0) ）
  • 应用了该动画到球体元素，设置了 1 秒的持续时间，无限循环
  • 实现了球体的上下弹跳效果

案例 3: 复杂动画效果

代码示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复杂动画效果</title>
    <style>
        /* 定义复杂动画 */
        @keyframes pulse {
            0% {
                transform: scale(1);
                background-color: #ff5722;
                border-radius: 0;
            }
            25% {
                transform: scale(1.2);
                background-color: #ff9800;
                border-radius: 25%;
            }
            50% {
                transform: scale(1);
                background-color: #4CAF50;
                border-radius: 50%;
            }
            75% {
                transform: scale(1.2);
                background-color: #2196F3;
                border-radius: 25%;
            }
            100% {
                transform: scale(1);
                background-color: #ff5722;
                border-radius: 0;
            }
        }
        
        .box {
            width: 100px;
            height: 100px;
            /* 应用动画 */
            animation-name: pulse;
            animation-duration: 3s;
            animation-timing-function: ease;
            animation-iteration-count: infinite;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <p>观察方块的缩放、颜色变化和形状变化动画</p>
</body>
</html>

效果分析:

  • 定义了一个名为 pulse 的复杂动画，包含五个关键帧，每个关键帧都有不同的 transform、background-color 和 border-radius 值
  • 应用了该动画到方块元素，设置了 3 秒的持续时间，无限循环
  • 实现了方块的缩放、颜色变化和形状变化的综合动画效果

实际应用场景

1. 加载动画

在页面或内容加载时，使用 @keyframes 定义加载动画，如旋转的 spinner、跳动的点等，提供视觉反馈。

2. 交互反馈

在用户交互时，使用 @keyframes 定义反馈动画，如按钮点击时的缩放效果、表单提交时的成功动画等。

3. 页面元素动画

在页面滚动或元素进入视口时，使用 @keyframes 定义入场动画，如淡入、滑动、旋转等效果，提升页面的视觉吸引力。

4. 游戏和交互应用

在游戏或复杂的交互应用中，使用 @keyframes 定义角色动画、场景过渡动画等，增强用户体验。

代码优化建议

1. 动画名称命名

  • 使用语义化的名称: 动画名称应该清晰地描述动画的效果，如 bounce、fadeIn、slideIn 等
  • 避免使用通用名称: 避免使用过于通用的名称，如 animation1、move 等，以免与其他动画冲突

2. 关键帧选择

  • 合理设置关键帧: 根据动画的复杂度，合理设置关键帧的数量。简单动画可以只使用 from 和 to，复杂动画需要更多的关键帧
  • 使用百分比值: 对于复杂动画，使用百分比值可以更精确地控制动画的进度

3. 性能优化

  • 优先使用 transform 和 opacity: 这两个属性的动画性能最好，不会触发重排（reflow）
  • 避免使用布局属性: 如 width、height、margin、padding 等，这些属性的动画会触发重排，影响性能
  • 使用 will-change 属性: 对于需要动画的元素，可以使用 will-change 属性提前告知浏览器，优化渲染性能
/* 优化前 */
@keyframes resize {
    from { width: 100px; }
    to { width: 200px; }
}

/* 优化后 */
@keyframes scale {
    from { transform: scale(1); }
    to { transform: scale(2); }
}

.box {
    will-change: transform;
}

4. 浏览器兼容性

  • 添加浏览器前缀: 对于旧版本浏览器，需要添加浏览器前缀
  • 降级处理: 对于不支持 CSS 动画的浏览器，确保基本功能正常
/* 带浏览器前缀的 @keyframes 定义 */
@-webkit-keyframes bounce {
    /* 关键帧定义 */
}

@-moz-keyframes bounce {
    /* 关键帧定义 */
}

@-o-keyframes bounce {
    /* 关键帧定义 */
}

@keyframes bounce {
    /* 关键帧定义 */
}

小结

  • @keyframes 规则用于定义 CSS3 动画的关键帧
  • 可以使用 from/to 关键字或百分比值来指定关键帧
  • 支持在每个关键帧中定义多个 CSS 属性
  • 是 CSS3 动画系统的核心，与 animation 属性配合使用
  • 广泛应用于加载动画、交互反馈、页面元素动画和游戏等场景
  • 性能优化的关键是优先使用 transform 和 opacity 属性

通过精心设计和使用 @keyframes 规则，可以创建出丰富多样的动画效果，提升网页的视觉吸引力和用户体验。

« 上一篇 CSS3 transition-delay 属性详解 下一篇 » CSS3 animation 属性详解
↑