CSS3 animation-iteration-count 属性详解

核心知识点

animation-iteration-count 属性概述

animation-iteration-count 是 CSS3 中的一个动画属性，用于指定动画应该播放的次数。它允许开发者控制动画是只播放一次，还是重复播放多次，甚至无限次循环。

animation-iteration-count 属性语法

animation-iteration-count: number | infinite;

其中：

  • number：指定动画播放的次数，必须是正整数
  • infinite：指定动画无限次播放
  • 默认值为 1，表示动画只播放一次

animation-iteration-count 属性取值

值 描述
<number> 动画播放的次数，必须是正整数，如 1、3、5 等
infinite 动画无限次播放
1 默认值，表示动画只播放一次

实用案例分析

基本使用示例

示例 1：不同重复次数的动画

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 animation-iteration-count 基本示例</title>
    <style>
        /* 定义关键帧 */
        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-50px);
            }
        }
        
        /* 应用动画 */
        .box {
            width: 100px;
            height: 100px;
            margin: 50px 20px;
            display: inline-block;
            animation-name: bounce;
            animation-duration: 1s;
            animation-timing-function: ease-in-out;
        }
        
        /* 播放1次 */
        .box1 {
            background-color: #3498db;
            animation-iteration-count: 1;
        }
        
        /* 播放3次 */
        .box2 {
            background-color: #e74c3c;
            animation-iteration-count: 3;
        }
        
        /* 播放5次 */
        .box3 {
            background-color: #2ecc71;
            animation-iteration-count: 5;
        }
        
        /* 无限播放 */
        .box4 {
            background-color: #f39c12;
            animation-iteration-count: infinite;
        }
    </style>
</head>
<body>
    <div class="box box1">1次</div>
    <div class="box box2">3次</div>
    <div class="box box3">5次</div>
    <div class="box box4">无限</div>
</body>
</html>

效果说明：

  • 定义了一个名为 bounce 的关键帧动画，实现元素的弹跳效果
  • 为四个 .box 元素应用了相同的动画，但设置了不同的 animation-iteration-count 值
  • 可以观察到，不同的重复次数会导致元素弹跳的次数不同，其中设置为 infinite 的元素会无限次弹跳

示例 2：结合 animation-direction 的效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 animation-iteration-count 结合 direction 示例</title>
    <style>
        /* 定义关键帧 */
        @keyframes slide {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(200px);
            }
        }
        
        /* 应用动画 */
        .box {
            width: 100px;
            height: 100px;
            margin: 50px 20px;
            display: inline-block;
            animation-name: slide;
            animation-duration: 1s;
            animation-timing-function: ease-in-out;
        }
        
        /* 播放2次，正常方向 */
        .box1 {
            background-color: #3498db;
            animation-iteration-count: 2;
            animation-direction: normal;
        }
        
        /* 播放2次，反向 */
        .box2 {
            background-color: #e74c3c;
            animation-iteration-count: 2;
            animation-direction: reverse;
        }
        
        /* 播放2次，交替方向 */
        .box3 {
            background-color: #2ecc71;
            animation-iteration-count: 2;
            animation-direction: alternate;
        }
        
        /* 无限播放，交替方向 */
        .box4 {
            background-color: #f39c12;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
    </style>
</head>
<body>
    <div class="box box1">normal</div>
    <div class="box box2">reverse</div>
    <div class="box box3">alternate</div>
    <div class="box box4">alternate infinite</div>
</body>
</html>

效果说明：

  • 定义了一个名为 slide 的关键帧动画，实现元素从左向右滑动的效果
  • 为四个 .box 元素应用了相同的动画，但设置了不同的 animation-iteration-count 和 animation-direction 值
  • 可以观察到：
    • normal 方向：动画每次都从起始位置开始，结束于结束位置
    • reverse 方向：动画每次都从结束位置开始，结束于起始位置
    • alternate 方向：动画第一次从起始位置到结束位置，第二次从结束位置到起始位置，以此类推
    • 结合 infinite 和 alternate：动画会无限次地来回滑动

实际应用场景

场景 1：加载动画

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 加载动画</title>
    <style>
        /* 定义加载动画关键帧 */
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        
        /* 应用加载动画 */
        .loader {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            margin: 100px auto;
            /* 无限循环旋转 */
            animation-name: spin;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
    </style>
</head>
<body>
    <div class="loader"></div>
</body>
</html>

效果说明：

  • 定义了一个名为 spin 的关键帧动画，实现元素的 360 度旋转
  • 使用 animation-iteration-count: infinite 使动画无限次播放，适合作为加载动画
  • 动画持续时间为 1 秒，使用 linear 时间函数，使旋转速度保持一致

场景 2：注意力吸引动画

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 注意力吸引动画</title>
    <style>
        /* 定义脉冲动画关键帧 */
        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.1);
                opacity: 0.7;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
        
        /* 按钮样式 */
        .btn {
            padding: 15px 30px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            margin: 100px auto;
            display: block;
            /* 应用动画 */
            animation-name: pulse;
            animation-duration: 2s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
        }
        
        /* 按钮悬停效果 */
        .btn:hover {
            animation-play-state: paused;
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <button class="btn">点击我</button>
</body>
</html>

效果说明：

  • 定义了一个名为 pulse 的关键帧动画，实现元素的脉冲效果（缩放和透明度变化）
  • 使用 animation-iteration-count: infinite 使动画无限次播放，吸引用户的注意力
  • 当鼠标悬停在按钮上时，使用 animation-play-state: paused 暂停动画，提供交互反馈

场景 3：多元素协同动画

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 多元素协同动画</title>
    <style>
        /* 定义波浪动画关键帧 */
        @keyframes wave {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
        }
        
        /* 容器样式 */
        .container {
            width: 400px;
            height: 100px;
            margin: 100px auto;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
        }
        
        /* 波浪条样式 */
        .bar {
            width: 20px;
            background-color: #3498db;
            border-radius: 10px 10px 0 0;
            animation-name: wave;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
        }
        
        /* 不同高度和动画延迟的波浪条 */
        .bar1 {
            height: 30px;
            animation-duration: 1s;
            animation-delay: 0s;
        }
        
        .bar2 {
            height: 60px;
            animation-duration: 1.2s;
            animation-delay: 0.1s;
        }
        
        .bar3 {
            height: 90px;
            animation-duration: 1.4s;
            animation-delay: 0.2s;
        }
        
        .bar4 {
            height: 60px;
            animation-duration: 1.2s;
            animation-delay: 0.3s;
        }
        
        .bar5 {
            height: 30px;
            animation-duration: 1s;
            animation-delay: 0.4s;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="bar bar1"></div>
        <div class="bar bar2"></div>
        <div class="bar bar3"></div>
        <div class="bar bar4"></div>
        <div class="bar bar5"></div>
    </div>
</body>
</html>

效果说明：

  • 定义了一个名为 wave 的关键帧动画，实现元素的上下波动效果
  • 使用 animation-iteration-count: infinite 使所有波浪条无限次播放动画
  • 为不同的波浪条设置了不同的高度、动画持续时间和延迟，创造出波浪起伏的效果

代码优化建议

  1. 合理选择重复次数

    • 对于一次性的动画效果，如页面加载、元素入场等，建议使用默认值 1
    • 对于需要持续显示的动画效果，如加载指示器、背景动画等，建议使用 infinite
    • 对于需要强调的交互元素，如按钮、通知等，可以使用有限的重复次数（如 2-3 次）来吸引注意力

  2. 结合其他动画属性

    • 与 animation-direction: alternate 结合使用，可以创建来回往复的动画效果
    • 与 animation-timing-function 结合使用，可以控制动画在每次重复时的速度变化
    • 与 animation-delay 结合使用，可以控制动画开始前的等待时间

  3. 性能考虑

    • 对于无限循环的动画，建议使用 transform 和 opacity 属性，因为它们可以利用 GPU 加速
    • 避免在无限循环的动画中使用会触发重排的属性，如 width、height、top、left 等
    • 对于复杂的无限循环动画，可以考虑使用 requestAnimationFrame 或其他优化技术来确保流畅性

  4. 用户体验

    • 避免过多的无限循环动画，这可能会分散用户的注意力或导致视觉疲劳
    • 对于需要用户交互的元素，如按钮，可以在用户悬停时暂停动画，提供更清晰的交互反馈
    • 考虑为动画添加适当的缓动函数，使动画效果更加自然

  5. 兼容性处理

    • 虽然现代浏览器已经广泛支持 CSS3 动画，但为了兼容旧版浏览器，可以添加浏览器前缀
    • 例如：-webkit-animation-iteration-count、-moz-animation-iteration-count、-o-animation-iteration-count

总结

animation-iteration-count 属性是 CSS3 动画系统中的一个重要组成部分，它用于控制动画的播放次数。通过合理设置 animation-iteration-count 属性的值，开发者可以创建出各种不同的动画效果，从一次性的入场动画到持续的背景动画。

在实际开发中，建议根据具体的动画需求和场景选择合适的重复次数，并结合其他动画属性（如 animation-direction、animation-timing-function 等），创建出符合用户体验的动画效果。同时，要注意性能优化，避免过多的无限循环动画导致页面性能下降。

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